Question

这里的代码也在小提琴http://jsfiddle.net/SgtRx/中（之前应该这样做，对不起）

好的，我的导航栏位于标题下方的Div Wrapper内，位于内容区域（正文）的顶部。

我是一个非常新手的用户，所以请原谅我可能犯的任何错误。

当我添加 border 来分隔每个块（按钮或文本）时，它将按钮分开，但是，它会在导航栏的末尾留下一个小空格（右侧）。

包装Div为1000px，我有5个按钮，每个200px，因此没有边框，它们适合完美，但如果我将宽度保持在200px，则导航栏向下移动，当我减小宽度时导航栏，它在右边留下了空白区域。我已经这样做了2天，我终于放弃了。如果可以，请帮忙。感谢。

    <body>
    <div id="wrapper">
    header id="top">
    <div id="test">
    <img src="images/vintage.jpg" width="1000" height="605" table width="780" order="0"  align="center" cellpadding="0" cellspacing="0"/>

    <nav id="mainnav">
    <ul>
    <li><a href="index.html" class="noBorder" >Home</a></li>
    <li><a href="sightseeing.html">Sightseeing</a></li>
    <li><a href="#">Eating Out</a></li>
    <li><a href="#">What's On</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test1</a></li>
    <li><a href="#" class="noBorder1">Where to Stay</a></li>
    </ul>
    </nav></div>
    </header>

和CSS

    #mainnav ul {
margin-top: auto;
margin-bottom: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
display: block;
float: left;
width: 1000px;
margin-left: auto;
list-style-type: none;
position: relative;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
margin-right: auto;
right: 0px;
left: 0px;
top: 0px;
bottom: 25px;
    }
    /*This will style all links nested in the <nav> element with the ID mainnav*/
    #mainnav a {
width: 197px;
display: block;
float: left;
text-align: center;
background-color: #020202;
color: #FCFCFC;
text-transform: uppercase;
padding-top: 0px;
padding-bottom: 0px;
line-height: 290%;
border-radius: 0px;
font-style: oblique;
font-weight: normal;
font-size: medium;
text-indent: 0px;
text-shadow: 0px 0px;
position: relative;
left: 0px;
margin-top: auto;
border-color: #FFFFFF;
border-left-style: solid;
border-width: thin;
right: 0px;
bottom: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
opacity: 1;
    }
   .noBorder {

        border-left-style: none !important;
    }

Answer 1

我强烈建议您为每个按钮使用宽度：20％，而不是使用固定值。

导航栏也是如此，使用宽度：100％

Answer 2

这是你的意思：

jsfiddle

#mainnav a{
width:19.91%;
}

Answer 3

代码如下：

我在 ul 上使用了 display flex。
设置ul的直接子li *flex:1。
最后，我将标签设置为 width:100%
我删除了一些不需要的代码。

@charset "utf-8";
body {
  color: #151515;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  margin: 0;
  background-color: #250e20;
  -webkit-box-shadow: 0px 0px;
  box-shadow: 0px 0px;
  padding-bottom: 0px;
}

#wrapper {
  background-color: #ffffff;
  width: 1000px;
  min-width: 739px;
  max-width: 1000px;
  margin-left: auto;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: auto;
  position: static;
}

#hero {
  clear: left;
  position: relative;
}

#hero img {
  min-width: 100%;
  min-height: 100%;
}

h1,
h2 {
  color: #3399cc;
  font-family: source-sans-pro;
  font-weight: 600;
  text-transform: none;
}

h1 {
  font-size: 73px;
  text-align: center;
  text-transform: uppercase;
  margin-top: 0px;
  color: #ffffff;
}

#main {
  width: 58%;
  float: left;
  margin-left: 2px;
}

#sidebar {
  width: 34%;
  margin-left: 4%;
  float: left;
}

footer {
  padding-top: 2px;
  padding-bottom: 2px;
  clear: left;
  background-color: #02080a;
  color: #ffffff;
  padding-left: 2%;
  bottom: 10px;
  position: static;
  padding-right: 2px;
}

figure {
  width: 420px;
}

figcaption {
  display: block;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
}

figure img {
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  background-color: #ffffff;
  -webkit-box-shadow: 1px 1px 15px #999999;
  box-shadow: 1px 1px 15px #999999;
}

.centered {
  margin-left: auto;
  margin-right: auto;
  display: block;
  float: none;
  clear: none;
}

.floatleft {
  margin-right: 10px;
  float: left;
}

.floatright {
  margin-left: 10px;
  float: right;
}


/*This will style links in all states*/

a {
  text-decoration: none;
  font-weight: bold;
  right: 0px;
}

a:link {
  color: #ff6600;
}

a:visited {
  color: #ff944c;
}

a:visited {
  color: #ff944c;
}

a:hover,
a:active,
a:focus {
  color: #f5f406;
  text-decoration: underline;
  list-style-type: none;
}


/*This targets the unordered list nested inside the <nav> element with the ID mainnav*/

#mainnav ul {
  padding: 0;
  display: flex;
  width: 100%;
  list-style-type: none;
  position: relative;
  right: 0px;
  left: 0px;
  bottom: 25px;
}

#mainnav ul>li {
  flex: 1;
}


/*This will style all links nested in the <nav> element with the ID mainnav*/

#mainnav a {
  z-index: 1;
  width: 100%;
  display: inline-block;
  text-align: center;
  background-color: #020202;
  color: #fcfcfc;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 24px;
  border-radius: 0px;
  font-style: oblique;
  font-weight: normal;
  font-size: medium;
  text-indent: 0px;
  text-shadow: 0px 0px;
  position: relative;
  border-color: #ffffff;
  border-left-style: solid;
  border-width: thin;
}

.noBorder {
  border-left-style: none !important;
}

#mainnav a:hover,
#mainnav a:active,
#mainnav a:focus,
#mainnav a.thispage {
  text-decoration: none;
  background-color: #43a6cb;
}

#hero article {
  width: 36%;
  padding-left: 10px;
  padding-right: 10px;
  position: absolute;
  top: 10px;
  right: 43px;
  background-color: #d88673;
  border-radius: 15px;
  color: white;
}

#hero h2 {
  color: white;
  text-transform: uppercase;
  margin-top: 5px;
  margin-bottom: -7px;
}

#container {
  background-color: #e1e54e;
  display: block;
  width: 1000px;
  height: 420px;
  float: left;
  overflow: auto;
}

#prev {
  background-image: url(../images/larrow.png);
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  width: 100px;
  height: 420px;
  float: left;
  position: relative;
  z-index: 99;
}

#next {
  background-image: url(../images/rarrow.png);
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  width: 100px;
  height: 420px;
  float: right;
  position: relative;
  z-index: 99;
}

#slider {
  display: block;
  width: 1000px;
  height: 420px;
  float: left;
  position: absolute;
  overflow: hidden;
}

article,
aside,
figure,
footer,
header,
nav {
  display: block;
}

#test {
  height: 220px;
  margin-top: -8px;
  margin-bottom: -8px;
  padding-bottom: 0px;
  position: static;
  width: 1000px;
}

<body>
  <div id="wrapper">
    <header id="top">
      <div id="test">
        <img src="images/vintage.jpg" width="1000" height="605" table width="780" border="0" align="center" cellpadding="0" cellspacing="0" />

        <nav id="mainnav">
          <ul>
            <li><a href="index.html" class="noBorder">Home</a></li>
            <li><a href="sightseeing.html">Sightseeing</a></li>
            <li><a href="#">Eating Out</a></li>
            <li><a href="#">What's On</a></li>
            <li><a href="#" class="noBorder1">Where to Stay</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <div id="hero">
      <div id="hero2">
        <div id="container">
          <div class="controller" id="prev"></div>
          <div id="slider">
            <img src="images/slide2.jpg" width="1000" height="420" />
            <img src="images/slide3.jpg" width="1000" height="420" />
          </div>
          <div class="controller" id="next"></div>
        </div>
      </div>
    </div>
    <article id="main">
      <h2>Riding the Cable Cars</h2>
      <p>No visit to San Francisco is complete without a ride on the iconic cable cars that climb up the vertiginous hills of the city. Of the twenty-three lines established between 1873 and 1890, three remain: two routes from downtown near Union Square
        to <a href="http://www.fishermanswharf.org/">Fisherman's Wharf</a>, and a third route along California Street.</p>
      <p>The cable cars rely on cables running constantly beneath the road&rsquo;s surface. The driver—or gripman—uses a lever to grip the cable to pull the car and its passengers up the hill. The gripman requires not only great strength, but also great
        skill. He needs to know where to release the cable to coast over crossing cables and points. The conductor works in close cooperation with the gripman, operating the brake at the rear of the car to prevent it from running out of control on the
        downward slopes.</p>
      <figure><img src="images/cable_car1.jpg" width="400" height="266" alt="" />
        <figcaption>The cable car terminus near Union Square</figcaption>
      </figure>
      <p>Although the cable cars are now mainly a tourist attraction, they're still used by local commuters to get to and from work. The California Street line is particularly popular among commuters on weekdays.</p>
    </article>
    <aside id="sidebar">
      <h2>Cable Car Tips</h2>
      <p>A single ride on a cable car costs $6. If you plan to travel around the city, it's often cheaper to buy a <a href="http://www.sfmta.com/cms/mfares/passports.htm">Muni Passport</a>, which gives you unlimited rides on San Francisco's extensive public
        transport system, including the cable cars (but not the <a href="http://www.bart.gov/">BART subway</a> system). Even a single-day passport ($14) will save you money if you make a return trip, and stop off to visit Chinatown one way.</p>
      There are often long lines at the cable car terminus, particularly on the Powell-Mason and Powell-Hyde routes. If you don't want to wait, try walking a few stops along the route. The conductor usually leaves a small number of places to pick up passengers
      on the way. The California Street route is generally less crowded (but not as spectacular).
    </aside>
    <footer>
      <div id: "footer">
        <p>&copy; Copyright 2014 Bayside Beat</p>
      </div>
    </footer>
  </div>
</body>

</html>

我有一个导航栏，有两个问题，一个来自另一个

3 个答案: