0

我在一个没有居中的网站上有一个菜单栏。我到处都试过 text-align:center ，玩弄边距和位置，但无论屏幕大小如何，我似乎都无法让文本与主标题对齐。你们介意看看吗？

http://jsfiddle.net/9sqkL/

                <title>Test</title>
                <link rel="stylesheet" type="text/css" href="style.css">
                <link href='http://fonts.googleapis.com/css?family=Lato:300,700' rel='stylesheet' type='text/css'>
      </head>

      <body>
             <h1 style="text-align: center;">Test</h1>

      <div>
                <ul id="nav">
                <li ><a href="#" style="color:rgb(56,162,188);">HOME</a></li>
                <li ><a href="#" style="color:rgb(123,176,26);">PROJECTS</a></li>
                <li ><a href="#" style="color:rgb(243,45,93);">RESUME</a></li>
                <li ><a href="#" style="color:rgb(234,49,20);">CONTACT</a></li>
                <li ><a href="#" style="color:rgb(237,103,14);">ABOUT</a></li>
      </ul>
      </div>

CSS：

h1, h2, h3, h4, h5, h6 {
      color: #26363d;
      font-family: "Lato", sans-serif;
      font-weight: 300;
      line-height: 1.3em;
}
h1 {
      font-size: 60;
}
h2 {
      font-size: 25px;
}
h3 {
      font-size: 21px;
}
h4 {
      font-size: 19px;
}
h5 {
      font-size: 17px;
}
h6 {
      font-size: 15px;
}
body {
      font-family: "Lato", sans-serif;
      background-image: url("background.png");
}

#nav {
    float: left;
width: 100% !important;
margin: 0 auto;
padding: 0;
list-style: none;
    }
#nav li {

    float: left;
    }
#nav ul li {
     display: inline;
}
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    border-right: 1px solid #ccc;
            }
#nav li a:hover {
    color: #c00;
    }
4

5 回答 5

1

您正在使用float: left;，width: 100%这是错误的，因此您需要删除 100% 宽度，以便您可以使用margin: auto;并且不需要float: left;，因为您需要将菜单栏居中

此外，您需要一个固定的宽度，#nav以便您可以margin: auto;用于水平居中，当您添加元素时，只需更改#nav.

到目前为止，我一直保留550px以便您可以进行相应更改，我更改的唯一 CSS 是#nav

#nav {
    width: 550px;
    margin: auto;
    padding: 0;
    list-style: none;
}

演示

于 2013-04-18T04:22:10.820 回答
0

有两个选项可以定义您的父 div 宽度而不是您可以定义magin:0 auto;

像这样 

.mianNavcon{width:600px;margin:0 auto; // define your website }

HTML

<div class="mianNavcon">
                <ul id="nav">
                <li ><a href="#" style="color:rgb(56,162,188);">HOME</a></li>
                <li ><a href="#" style="color:rgb(123,176,26);">PROJECTS</a></li>
                <li ><a href="#" style="color:rgb(243,45,93);">RESUME</a></li>
                <li ><a href="#" style="color:rgb(234,49,20);">CONTACT</a></li>
                <li ><a href="#" style="color:rgb(237,103,14);">ABOUT</a></li>
      </ul>
      </div>

演示一

------------------

第二个选项是删除你的ID nav浮动width，现在定义

display inline-block;

像这样 

.mianNavcon{text-align:center;}
#nav {
       display:inline-block;
    padding: 0;text-align:left;
    list-style: none;
        }

演示-2

于 2013-04-18T04:25:58.960 回答
0

设置一个明确的绝对宽度，比如 481px (min) on#nav和 remove float:left。演示

于 2013-04-18T04:26:46.290 回答
0

您已经float: left;确定ul了导致问​​题的原因。您可以display: inline-block;使用li's 和 add text-align: center;onul以使导航内的所有项目居中。这样，您甚至不必在ul.

工作演示

如果您在 上指定固定宽度，ul则只需执行margin: 0 auto;.

希望有帮助！

于 2013-04-18T04:25:08.127 回答
0

如果您要使其具有响应性，那么您需要使用百分比来确定宽度和字体大小，请查看下面的链接。

您还需要使用媒体查询。

我给了 li 的宽度，当你浮动任何元素时，你甚至应该清除它。

#nav li {
  float: left;
  width: 20%;
  text-align: center;
  font-size: 85%;
}

/*to clear floating LI*/
#nav ul:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

http://jsfiddle.net/madhuri2987/9sqkL/5/

希望这可以帮助！

于 2013-04-18T05:03:07.367 回答