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

html-css019

HTML中导航条文字怎样弄成横排显示？,第1张

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

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不好控制   */

}

将ul里面的li标签都设置为右浮动即可。如：

<ul style="overflow:hidden display:block">

    <li class="float:right padding:10px>项目1</li>

    <li class="float:right padding:10px>项目1</li>

    <li class="float:right padding:10px>项目1</li>

    <li class="float:right padding:10px>项目1</li>

</ul>

li标签元素横排，关键是float属性，比如下例，li往左浮动，不清除浮动即可。居中显示，把ul，li用一个盒子nav装起来，并设置 “text-align: center”属性即可，即内容居中。具体如下例所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=" http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

#nav {

height: 30px

width: 100%

background-color: #c00

text-align: center

}

#nav ul {

margin: 0 0 0 30px

padding: 0px

font-size: 12px

color: #FFF

line-height: 30px

white-space: nowrap

}

#nav li {

list-style-type: none

display: inline

}

#nav li a {

text-decoration: none

font-family: Arial, Helvetica, sans-serif

padding: 7px 10px

color: #FFF

}

#nav li a:hover {

color: #ff0

background-color: #f00

}

</style>

</head><body>

<div id="nav">

<ul>

<li><a href=" http://www.52css.com/">HomePage</li></A>

<li><a href=" http://www.52css.com/">Div+CSS教程</a></li>

<li><a href=" http://www.52css.com/">CSS布局实例</a></li>

<li><a href=" http://www.52css.com/">CSS2.0教程 </a></li>

<li><a href=" http://www.52css.com/">CSS在线手册</a></li>

<li><a href=" http://www.52css.com/">Web标准</a></li>

<li><a href=" http://www.52css.com/">XHTML教程</a></li>

</ul>

</div></body>

</html>