Question

编辑：我确实设法在flex中弄清楚了！但是链接仍然没有完全占据整个第一行：

左右还有一些额外的空间。有什么方法可以强制flex使用所有可用空间？

我希望导航栏根据链接的数量自动调整宽度。

.top-container {
  text-align: center;
  display: flex;
}

.top-content-box {
  width: 90%;
  height: 30%;
  margin: 30px auto;
  background: #fff;
  box-shadow: 0px 0px 10px #000;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.news-and-twitter {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.twitter-min {
  width: 300px;
}

.news-box {
  text-align: left;
  vertical-align: middle;
  padding: 30px;
  flex-grow: 2;
}

.nav-bar {
  text-align: center;
  flex-grow: 1;
}

ul.link-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: inline-block;
}

<div class="top-container">

  <div class="top-content-box">

    <div class="nav-bar">
      <ul class="link-list">
        <li class="link-list"><a class="nav-list" href="default.asp">home</a></li>
        <li class="link-list"><a class="nav-list" href="news.asp">about</a></li>
        <li class="link-list"><a class="nav-list" href="contact.asp">projects</a></li>
        <li class="link-list"><a class="nav-list" href="about.asp">portfolio</a></li>
        <li class="link-list"><a class="nav-list" href="about.asp">commissions</a></li>
        <li class="link-list"><a class="nav-list" href="about.asp">patreon</a></li>
      </ul>
    </div>
    <div class="news-and-twitter">
      <div class="news-box">
        <h1>current project</h1>
        Arena Circus ch 4 | Inserting voices into The Pretenders Guild
        <h1>Current Events</h1>
        <ul>
          <li>The Pretenders Guild voice update is coming 7/15/19!
          </li>
          <li>Check the 1 year anniversary <a href="https://www.patreon.com/posts/1-year-special-28267096">special offer</a> here!</li>
        </ul>
      </div>
      <div class="twitter-min">
        <a class="twitter-timeline" data-width="300" data-height="450" data-theme="light" data-link-color="#343584" href="https://twitter.com/CapMinyan?ref_src=twsrc%5Etfw">Tweets by CapMinyan</a>
        <script async src="https://platform.twitter.com/widgets.js"
          charset="utf-8"></script>
      </div>
    </div>
  </div>
</div>

screenshot

Answer 1

有些人可能会说“使用弹性盒” ，但我真的不喜欢这样做！

所以我的建议是定位导航栏left:50%;

然后给它一个margin-left: -100px，然后将-100px更改为导航宽度的一半，所以可以说它的宽度为526px，您将其设置为-263px。

并且它的宽度可能会根据设备的屏幕尺寸而变化，因此我会添加一些Javascript来更改页面加载时的宽度，因此基本上检查一下导航栏的宽度，然后将其除以2，然后在“ -“，然后在其前面的” px“ ...

我知道对于这样一个简单的任务来说听起来是否太复杂，但是我喜欢使用JavaScript来完成我的事情

很多人会说这很愚蠢，因为Javascript越少越好，但我强烈反对，但这是我的看法...除了大量会使页面变慢，还有其他一些事情...

或者尝试执行margin: 0 auto可以解决问题，值得一试！

Answer 2

您必须使列表（ul.link-list）的父元素具有弹性，并使子元素（li.link-list）的flex-grow为1

.top-container{

    text-align:center;


 }
 .top-content-box {
     width: 90%;
     height:30%;
     margin:30px auto;
     background: #fff;
     box-shadow: 0px 0px 10px #000;  

 }

 .news-and-twitter{
   display:flex;
   flex-direction:row;
   flex-grow:1;
 }

 .twitter-min{

  width:300px;

 }

 .news-box{

  text-align:left;
  vertical-align: middle;
  padding:30px;
  flex-grow:2;

 }

如何使导航栏跨越整个div的宽度

2 个答案: