Question

更新：这是一个小提琴：https://jsfiddle.net/720v4zdy/8/

我正在定制一个tumblr博客以匹配某人的网站，而且它几乎处于良好状态。我们从一个已经紧密匹配的主题开始，然后在CSS中进行了一些更改。

我无法解决的最后一个问题是如何使导航栏拉伸整个页面，同时包含最大宽度为1024px的所有链接。

这是tumblr博客WIP：http://craftysheepblog.tumblr.com/

我希望导航栏可以拉伸整个页面，但链接的最大宽度为1024px。这里的麻烦是我只有一个DIV来做这个，所以我不太确定如何实现它。

我现在正在使用它，这在某种程度上有效。当你使浏览器窗口变小时会变得很难看。

#top nav {
    background-color: rgb(45, 50, 51);
    color: white;
    text-align: left;
    padding: 11px 22%;
    margin-top: 20px;
    width: 100%;
}

Answer 1

如何使用max-width: 1024px;

Answer 2

执行此操作的最佳方法是使用div内部的ul作为导航栏。 ul可以包含您的所有链接。这样，div的宽度可以跨越整个页面，而无序列表的最大宽度为1024px。

示例代码：

<html>
    <head>
        <style>
            #nav {
                width: 100%;
                height: 20%;
            }
            #nav-links {
                max-width: 1024px;
            }
        </style>
    </head>
    <body>
        <div id="nav">
            <ul id="nav-links">
                <li>Link 1</li>
                <li>Link 2</li>
                <li>Link 3</li>
                <li>...</li>
            </ul>
        </div>
    </body>
</html>

然后你可以根据自己的喜好将ul设计为导航栏。这是一个很好的链接：http://www.w3schools.com/css/css_navbar.asp

Answer 3

根据您分享的信息量，很难说。显然，实现这一目标的最简洁方法是在这些子元素周围插入另一个元素（div或其他），并为分配一个最大宽度...但是这听起来并不像是一个选项为你？

如果您知道要构成1024px的元素数量，可以手动分配它们的宽度（即给四个子节点中的每一个宽度为256px，或类似的东西）。

如果您不知道这些内容，并且您对空间的选择有限，Javascript是您的最佳选择。您可以编写一个对子项进行计数的脚本，并适当地指定其宽度或在适当的位置插入清除。

如果您扩展您的问题以针对特定方法，我确信自己和这里的许多大师将能够为您提供更具体的指导。

Answer 4

使用flexbox：https://philipwalton.github.io/solved-by-flexbox/

链接应该正常拉伸，但当它们各自超过341px时开始缩小，即总宽度为1023px。

注意：以完整页面模式最佳浏览的代码段。

相关CSS

body {
  color: rgb(38, 39, 43);
  font-family: "Open Sans", "sans-serif", Arial;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.42857143;
}
.row {
  max-width: 100%;
}
#top {
  margin-top: 0px;
}
#top .title {
  font-family: "Open Sans", "sans-serif", Arial;
  font-size: 30px;
  text-align: left;
  font-weight: lighter;
  margin-top: 18px;
  display: block;
  width: 100%;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}
#top nav {
  background-color: rgb(45, 50, 51);
  color: white;
  text-align: left;
  padding: 11px 22%;
  margin-top: 20px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: baseline;
}
#top nav a {
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 600;
  margin: 0px 15px;
  flex: 0 1 341px;
}
#top nav a {
  color: #fff;
  font-size: 13px;
  text-transform: none;
  text-decoration: none;
  font-family: "Open Sans", "sans-serif", Arial;
  font-weight: 300;
}
#top nav a:hover {
  color: #52A708;
}
#top .headimg {
  display: none;
}
#posts {
  width: 100%;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}
.column,
.columns {
  padding: 0;
}
#posts article:nth-child(1) {
  padding-top: 20px;
}
#posts article .title {
  font-family: "Open Sans", "sans-serif", Arial;
  font-size: 36px;
  color: rgb(38, 39, 43);
  text-align: center;
  font-weight: 500;
}
#posts article footer {
  display: none;
}
#paginate {
  display: none;
}
#bottom {
  border: none;
}
#bottom {
  border: none;
  max-width: 1024px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<header id="top">
  <div class="row">
    <div class="small-12 small-centered columns">

      <img class="headimg" src="http://assets.tumblr.com/images/x.gif?v=1">


      <a href="/" class="active">
        <div class="title">Page Title</div>
      </a>


      <div class="description"></div>

      <nav>


        <a class="page" href="/online-store">Shop NAO</a><a class="page" href="/nao-couture">NAO Couture</a><a class="page" href="/nao-experience">NAO Experience</a>







      </nav>
    </div>
    <!--.columns-->
  </div>
  <!--.row-->
</header>

for($i=10; $i -le 1000; $i=$i+5){$i | Out-File -Append sequence.txt}

Answer 5

您可以将nav设置为max width: 1024px并填写＆＃34;差距＆＃34;在::before和::after伪元素的边上。您需要在overflow上隐藏header#top以避免横向滚动，因为伪元素设置比内容更宽。

这取决于您使用<a>（height，line-height等设置导航的高度并跟随...

另外 - 再调整一些;你的CSS在现场网站上有一个600px的断点会干扰这个（以及我没有清理过的额外的CSS）。

＆＃13;

body {
  color: rgb(38, 39, 43);
  font-family: "Open Sans", "sans-serif", Arial;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.42857143;
  margin: 0;
}
#top {
  overflow: hidden;
}
#top .title {
  font-family: "Open Sans", "sans-serif", Arial;
  font-size: 30px;
  text-align: left;
  font-weight: lighter;
  margin-top: 18px;
  display: block;
  width: 100%;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

#top nav {
  background-color: rgb(45, 50, 51);
  color: white;
  text-align: left;
  max-width: 1024px;
  margin: 50px auto 20px;
  height: 50px;
  width: 100%;
  border-width: 0;
  padding: 0;
  position: relative;
}
#top nav::before{
  background: rgb(45,50,51);
  content: "";
  display: block;
  position: absolute;
  height: 50px;
  width: 100%;
  right: 100%;
}
#top nav::after{
  background: rgb(45,50,51);
  content: "";
  display: block;
  position: absolute;
  height: 50px;
  width: 100%;
  left: 100%;
  top: 0;
}
#top nav a {
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 600;
  margin: 0px 15px;
}

#top nav a {
  color: #fff;
  font-size: 13px;
  text-transform: none;
  font-family: "Open Sans", "sans-serif", Arial;
  font-weight: 300;
  border: 0;
  display: inline-block;
  padding: 0 1em;
  margin: 0;
  height: 50px;
  line-height: 50px;
}

#top nav a:hover {
  color: #52A708;
}

#top .headimg {
  display: none;
}

＆＃13;

<header id="top">
  <div class="row">
    <div class="small-12 small-centered columns">
      <a href="/" class="active">
        <div class="title">Page Title</div>
      </a>
      <nav>
        <a class="page" href="#">Link 1</a><a class="page" href="#">Link 2</a><a class="page" href="#">Link 3</a>
      </nav>
    </div>
  </div>
</header>

＆＃13;

如何设置DIV内容的最大宽度而不是DIV本身？

5 个答案: