css中Li的横向排列自适应宽度的问题

html-css026

css中Li的横向排列自适应宽度的问题,第1张

首先学习一下width属性的定义和用法:

定义和用法

width 属性设置元素的宽度。

说明

这个属性定义元素内容区的宽度,在内容区外面可以增加内边距、边框和外边距。

行内非替换元素会忽略这个属性。

可以通过width属性设置li中字段的宽度根据实际长度显示宽度。在li的样式中加上width:auto就可以实现了;现在来看下面一段代码:

CSS样式设置:

#info_main{text-align:center border:1px solid #CCCwidth:620px}

#info_main li{width:autofloat:leftmargin:0px 8px padding:0pxborder:1px solid #CCC}

网页代码:

 <div id="info_main">

<ul>

<li>时间:{dede:field name='pubdate' function='strftime("%Y-%m-%d %H:%M","@me")' /}</li>

<li>来源:{dede:field.source/}</li>

<li>作者:{dede:field.writer/}</li>

<li>点击:<script src="{dede:field name='phpurl'/}/count.php?view=yes&aid={dede:field name='id'/}&mid={dede:field name='mid'/}" type='text/javascript' language="javascript"></script>次</li>

</ul>

</div>

<div style="overflow:hiddenwidth:100px">

改成<div style="overflow:hiddenwidth:1000px">就好了

你就设置100PX宽他当然浮动不上去。而且你还设置了多余部分隐藏