ul li不换行图片横向展示效果
发布网友
发布时间：2022-04-06 11:18
共3个回答
懂视网
时间：2022-04-06 15:39
刚学前端不久，尝试着写各种布局。今天想实现一个横向排列的照片列表，于是最先想到的就是利用ul将list-style设置为none。但是这样只是仅仅将ul默认为横向排列，并没有限制ul一定不换行。当ul设置的宽度不足以容下图片时，图片就会自动换行。
于是查阅资料和相关布局属性。最终找出了两种解决方案。
方案一：
设置足够宽的宽度，然后将li的float属性设置为left。意思就是使li元素向左浮动排列。代码如下：
ul {
width: 2000px; //设置足够的宽度
overflow: hidden;
white-space:nowrap; //处理块元素中的空白符和换行符的，这个属性保证图片不换行
}
li{
list-style: none;
float: left; //向左排列
margin-left: 15px;
width: 130px;
}方案二：
ul {
display: block;
overflow: hidden;
white-space:nowrap;//处理块元素中的空白符和换行符的，这个属性保证图片不换行
}
li{
list-style: none;
display: inline-block;//使li对象显示为一行
margin-left: 15px;
width: 130px;
}在上面我们可以看到两种解决方法都用到了white-space属性，如果没有这个属性就无法完成不换行的效果。通过css手册可以看出这个属性是：如何处理元素内的空白。当选择nowrap时就是文本不会换行，文本会在在同一行上继续，直到遇到 < br > 标签为止。但是用于非文本的元素也可以。
还有就是display属性。在方案二中如果不设置为inline-block，也无法完成不换行的效果。
inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
inline-block的特点：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)。
至此就解决了ul横向排列不换行的问题了。看来熟悉各种属性的特点还是很有必要的。
热心网友
时间：2022-04-06 12:47
我现在的效果变成竖着排列的了。想让他变成不换行的横向排列图片展示。请教该怎么该CSS？
我现在的CSS代码如下：
.list_tw_02{ width:950px; border:1px #dcdcdc solid; margin:10px 0 0 0 ; }
.list_tw_02 ul{ padding-top:5px; padding-left:5px; display:block; float:left; }
.list_tw_02 li{ text-align:center; line-height:25px; display:block; }
.list_tw_02 img{ width:100px; height:135px; padding:3px; border:1px solid #cacaca; }
网页代码如下：
<div class="list_tw_02">
<div class="list_tw_t"><h3>最新图文</h3></div>
<ul>
{dede:arclist row=3 typeid=1,2,3 titlelen=16 noflag='h' type='image.'}
<li><a href="[field:arcurl/]"><img src="[field:picname/]" alt="[field:fulltitle/]" /></a>
<br /><a href="[field:arcurl/]" title="[field:fulltitle/]">[field:title/]</a></li>
{/dede:arclist}
</ul>
<div class="clear"></div>
</div>
热心网友
时间：2022-04-06 14:05
