Question

我在网页上有一个水平导航栏，我需要将内容置于中心位置。由于某种原因，它是向后的...而不是从左到右的Home，Shop，About和Contact。这是联系，关于，购物，然后回家。

我需要知道A：如何扭转它 B：如何将文本置于按钮内？

这是我的所有代码：

<div id="masthead"></div>
<h1>American Backcountry</h1>
</div><!-- end masthead -->
<ul id="mainnav">
    <li><a href="index.htm">Home</a></li>
    <li><a href="shop.htm">Shop</a></li>
    <li><a href="about.htm">About</a></li>
    <li><a href="contact.htm">Contact</a></li>
    </ul>

CSS：

#mainnav{

    height:30px;
    background-color: black;
    margin: 0;
    padding-right: 45px;
    }

#mainnav li{
    display:inline-block;
    background-color: #6a4622;
    float:right;
    padding-right: 45px;
    border:1px solid;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px; 
    margin-left: 3px;
    width: 40px;
}

#mainnav a:link{
    display: block;
    height: 28px;
    color:#dfd098;
    text-decoration: none;
    font-weight:bold;
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;

}

编辑（接受回答后）

好的，我能够把所有东西都集中在一起，然后把它挂在右边。

现在，我需要更改Home链接的颜色并更改文本颜色......我该怎么做？我需要定位主页链接。

Answer 1

我在网页上有一个水平导航栏，我需要将内容置于中心位置。出于某种原因，它也是向后的...而不是从左到右的Home，Shop，About和Contact 。它的联系方式，关于，购物，然后回家。

原因是代码中的float: right属性。使用此属性，您的元素将按照它们在代码中出现的确切顺序从右向左显示，让您感觉它们是向后的。

您是否碰巧知道如何使我的Home链接的颜色和文本颜色与其他三种不同？

我建议您详细了解CSS Selectors和Pseudo-classes。

＆＃13;

#mainnav {
  background-color: #dedede;
  margin: 0;
  padding-right: 45px;
  text-align: right;
}
#mainnav li {
  display: inline-block;
  background-color: #6a4622;
  border: 1px solid;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin-left: 3px;
}
#mainnav a {
  display: block;
  padding: 10px 15px;
  color: #dfd098;
  text-decoration: none;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
}
#mainnav li:first-child a {
  color: #fff;
}

＆＃13;

<div id="masthead"></div>
<h1>American Backcountry</h1>
<!-- end masthead -->
<ul id="mainnav">
  <li><a href="index.htm">Home</a>
  </li>
  <li><a href="shop.htm">Shop</a>
  </li>
  <li><a href="about.htm">About</a>
  </li>
  <li><a href="contact.htm">Contact</a>
  </li>
</ul>

＆＃13;

Answer 2

您可能需要考虑使用flexbox。

flexbox的好处是：

最少的代码，所以效率很高
垂直和水平居中，简单易行
响应
它代表了CSS布局的未来

<强> CSS

#mainnav {
    display: flex; /* NEW - establish flex container */
    justify-content: flex-end; /* NEW - right-align flex items (li) */

    height: 30px;
    background-color: black;
    margin: 0;
    padding-right: 45px;
    list-style: none;
    }

#mainnav li {
    /* display:inline-block; */
    background-color: #6a4622;
    /* float:right; */
    /* padding-right: 45px; */
    border:1px solid;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px; 
    margin-left: 3px;
    width: 75px; 
    display: flex; /* NEW - establish (nested) flex container */
    justify-content: center; /* center text horizontally, in this case */
    align-items: center; /* center text vertically, in this case */
}

#mainnav a:link{
    /* display: block; */
    height: 100%; /* adjusted */
    color:#dfd098;
    text-decoration: none;
    font-weight:bold;
    font-size: 12px;
    text-transform: uppercase;
    /* text-align: center; */
}

DEMO：http://jsfiddle.net/nhp0gsw6/1

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。

链接按钮中的中心文字？

2 个答案: