HTML中导航条文字怎样弄成横排显示?

发布网友发布时间：2022-04-28 16:20

共3个回答

热心网友时间：2022-04-19 06:33

你之所以出现这个问题，原因在于

li{
    list-style:none;
    margin-top:0px;
    text-align:left;
    float:left;
    width:30px;  /*  这句限定了列表每列的宽度，宽度太小，所以文字变成竖写。去掉，或者改足够大  */
    }

我把你的代码重新改了一下，可以稍微好一点。

无标题文档.html 文件代码如下：

<!doctype html>
<html lang="zh">
  <head>
    <meta charset="utf-8" >      /*  这行可以写得这样省略  */
    <title>ul列表</title>
    <link href="li.css" rel="stylesheet">  /*  使用外链CSS更好  */
  </head>

  <body>
              /*  <center/>标签去掉，这个标签是个淘汰的标签，可以用CSS控制  */
      <div id="cs">
      <div class="ul">
        <ul>
          <li>首页</li><li>家用电器</li><li>手机数码</li><li>日用百货</li><li>书籍</li><li>帮助中心</li><li>免费开店</li><li>全球咨询</li>   /*  li的代码全部连起来，可以让li之间没有一个默认的空格  */
        </ul>
      </div>
      </div>
  </body>
</html>

li.css 文件代码如下：

#cs {

background-image:url(admin.png);

width:1003px;

height:78px;

}

ul {

text-align: left; /* 对ul使用左对齐 */

padding: 0.15em 0 1px 0;

}

li {

display: inline; /* 直接用内联行显示，不用float，float不好控制 */

}

热心网友时间：2022-04-19 07:51

不用给li加width，直接加个 padding: 0 10px;多好！这样即使菜单字数不一样也能很好的显示~

此外，使用line-height可以是字在图片垂直方向居中

热心网友时间：2022-04-19 09:26

li{
list-style:none;
margin-top:0px;
text-align:left;
float:left;
width:30px;
}
中改为width:80px;