1、给Li设置浮动。加上 float:left
2、对LI设置好相应的宽度width和高度height
3、通过overflow:hidden对超出li宽度的隐藏
相应代码为:
li{float:leftwidth:200pxheight:30pxline-height:30pxoverflow:hidden}
要看这个li横向还是纵向,横向的主要用padding-left和padding-right来控制,还可用li的宽度来控制;
纵向的就多点,除了有padding-top和padding-bottom来控制,还可以用li的高度以及li的行高来控制;
具体二种代码如下:
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#a2 { font-family: Arialfont-size: 14pxcolor: #000000text-decoration: nonemargin: autoheight: 100pxwidth: 900pxpadding: 0pxlist-style-type: nonefloat: noneclear: bothborder: 1px solid #000099}
#a2 li { line-height: 30pxlist-style-type: nonefloat: leftheight: 30pxwidth: autopadding-top: 5pxpadding-right: 5pxpadding-bottom: 5pxpadding-left: 5pxbackground-color: #FFFFCCborder: 1px dashed #000066margin-top: automargin-right: automargin-bottom: automargin-left: autotext-align: center}
#a1 li { font-family: "微软雅黑"font-size: 14pxline-height: 30pxcolor: #333333text-decoration: nonefloat: nonewidth: autoheight: 35pxpadding: 6px}
#a1 { border: thin solid #990000}
-->
</style>
</head>
<body>
<div id="a2">
<ul>
<li>新闻标题1</li>
<li>新闻标题2</li>
<li>新闻标题3</li>
<li>新闻标题4</li>
<li>新闻标题5</li>
</ul>
</div>
<p></p>
<div id="a1">
<ul>
<li>这是新闻标题1</li>
<li>这是新闻标题2</li>
<li>这是新闻标题3</li>
<li>这是新闻标题4</li>
<li>这是新闻标题5</li>
</ul>
</div>
</body>
</html>
ul的display设成inline-block又不是li的,li当然不横向了。不过习惯都是用float:left来做。等分情况多多,li有边框还要考虑到两个li靠在一起边框也挤一起,看起来就粗了不好看,又要处理。所以等分看情况吧!