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

Question

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

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

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

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

我希望导航栏拉伸整个页面，但包含的链接最大宽度为 1024 像素。这里的问题是我只有一个 DIV 可以用来做这件事，所以我不太确定如何实现它。

我目前正在使用这个，它有点管用。但是，当您将浏览器 window 变小时，它会变得很难看。

#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 可以包含您所有的 link。这样，div 的宽度可以跨越整个页面，而无序列表的最大宽度为 1024 像素。

示例代码：

<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 设置为导航栏。这是一个很好的 link：http://www.w3schools.com/css/css_navbar.asp

Answer 3

根据你分享的信息量，很难说。显然，实现此目的最简洁的方法是在这些 child 元素周围插入另一个元素（div 或其他），并分配 it 一个 max-width。 .. 但这听起来好像不是您的选择？

如果您知道要组成 1024px 的元素有多少，您可以手动分配它们的宽度（即给四个 children 中的每一个设置 256px 或类似的宽度）。

如果您对这些事情一无所知，并且您对 space 的选择有限，那么 Javascript 是您的最佳选择。您可以编写一个计算 children 的脚本，然后适当地分配它们的宽度或在适当的位置插入空白。

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

Answer 4

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

链接应正常伸展，但当每个链接超过 341px（总宽度为 1023px）时开始收缩。

注意：最好在全页模式下查看代码段。

相关CSS

 #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;
    }

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>

Answer 5

您可以将 nav 设置为 max width: 1024px，并用 ::before 和 ::after 伪元素填充两侧的 "gaps"。您需要隐藏 header#top 上的 overflow 以避免横向滚动，因为伪元素设置得比内容宽。

这确实取决于您设置导航高度并使用 <a>（height、line-height 等）...

此外 - 再调整一些；在您的实时站点上的 CSS 中有一个 600 像素的断点会干扰此（以及我没有清理的许多额外 CSS）。

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;
}

<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>

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

How to set max-width for DIV contents but not the DIV itself?

html

css

tumblr