css布局,li内的文字变成竖向的了,怎么解决?

html-css013

css布局,li内的文字变成竖向的了,怎么解决?,第1张

li内的文字变成竖向了,可以通过css对LI的样式进行定义和修改:

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靠在一起边框也挤一起,看起来就粗了不好看,又要处理。所以等分看情况吧!