DIV li显示宽度的有关问题
日期：2014-05-17 浏览次数：20596 次
DIV li显示宽度的问题
在用table布局的时候，如果table的宽度固定了，不设置 <td> 的宽度那么，td的宽度自动填充分配。例如
<table width=300px>
<tr>
<td> aaaaaaaaa </td>
<td> bbbbbbbbbb </td>
<td> ccc </td>
</tr>
</table>
把上面的布局用div来代替，如下所示
<div stryle= "width=300px; ">
<ul>
<li> aaaaaaaaa </li>
<li> bbbbbbbbbb </li>
<li> ccc </li>
</ul>
</div>
请问css怎么设置使li显示自动分配宽度，和table的效果一样，当然li的个数是不定的，
------解决方案--------------------
<li style= "display:inline ">
------解决方案--------------------
你所谓的自动分配是什么意思？
------解决方案--------------------
<div stryle= "width=300px; ">
应该是 <div style= "width:300px; ">
在这里设置的DIV的值了,UL列表并不会继承DIV的宽度
------解决方案--------------------
//看下面是不是你要的效果
<style>
.t ul,.t ul li{padding:0px;margin:0px;}
</style>
<div class= "t " style= "width:300px; ">
<ul>
<li> aaaaaaaaa </li>
<li> bbbbbbbbbb </li>
<li> ccc </li>
</ul>
</div>
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> Untitled Document </title>
<style type= "text/css ">
*{padding:0;margin:0;}
.t li {list-style:none; float:left; width:33%; border:1px solid red;}
</style>
</head>
<body>
<ul class= "t ">
<li> aaa </li>
<li> bbb </li>
<li> ccc </li>
</ul>
</body>
</html>
用百分比~~~我也无奈~找了半天都不知道怎么跟table一样~~~
------解决方案--------------------
就用百分比吧.
*****************************************************************************
用功譬若掘井，与其多掘数井而皆不及泉，何若老守一井，力求及泉而用之不竭乎?
------解决方案--------------------
好像百万比是没用
------解决方案--------------------
<ul style= "width: 300px; ">
<p style= "padding:0;margin:0; ">
<li style= "display:inline; "> aaaaaaaaa </li>
<li style= "display:inline; "> bbbbbbbbbb </li>
<li style= "display:inline; "> ccc </li>
</p>
<p style= "padding:0;margin:0; ">
<li style= "display:inline; "> aaaa </li>
<li style= "display:inline; "> bbbbbbbbbbbbbbbbbbbbbbbbb </li>
<li style= "display:inline; "> ccc </li>
在用table布局的时候，如果table的宽度固定了，不设置 <td> 的宽度那么，td的宽度自动填充分配。例如
<table width=300px>
<tr>
<td> aaaaaaaaa </td>
<td> bbbbbbbbbb </td>
<td> ccc </td>
</tr>
</table>
把上面的布局用div来代替，如下所示
<div stryle= "width=300px; ">
<ul>
<li> aaaaaaaaa </li>
<li> bbbbbbbbbb </li>
<li> ccc </li>
</ul>
</div>
请问css怎么设置使li显示自动分配宽度，和table的效果一样，当然li的个数是不定的，
------解决方案--------------------
<li style= "display:inline ">
------解决方案--------------------
你所谓的自动分配是什么意思？
------解决方案--------------------
<div stryle= "width=300px; ">
应该是 <div style= "width:300px; ">
在这里设置的DIV的值了,UL列表并不会继承DIV的宽度
------解决方案--------------------
//看下面是不是你要的效果
<style>
.t ul,.t ul li{padding:0px;margin:0px;}
</style>
<div class= "t " style= "width:300px; ">
<ul>
<li> aaaaaaaaa </li>
<li> bbbbbbbbbb </li>
<li> ccc </li>
</ul>
</div>
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> Untitled Document </title>
<style type= "text/css ">
*{padding:0;margin:0;}
.t li {list-style:none; float:left; width:33%; border:1px solid red;}
</style>
</head>
<body>
<ul class= "t ">
<li> aaa </li>
<li> bbb </li>
<li> ccc </li>
</ul>
</body>
</html>
用百分比~~~我也无奈~找了半天都不知道怎么跟table一样~~~
------解决方案--------------------
就用百分比吧.
*****************************************************************************
用功譬若掘井，与其多掘数井而皆不及泉，何若老守一井，力求及泉而用之不竭乎?
------解决方案--------------------
好像百万比是没用
------解决方案--------------------
<ul style= "width: 300px; ">
<p style= "padding:0;margin:0; ">
<li style= "display:inline; "> aaaaaaaaa </li>
<li style= "display:inline; "> bbbbbbbbbb </li>
<li style= "display:inline; "> ccc </li>
</p>
<p style= "padding:0;margin:0; ">
<li style= "display:inline; "> aaaa </li>
<li style= "display:inline; "> bbbbbbbbbbbbbbbbbbbbbbbbb </li>
<li style= "display:inline; "> ccc </li>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
