如何使導航欄跨越整個div的寬度

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> 

屏幕截圖

Answer 1

有人可能會說“使用彈性盒”，但我真的不喜歡這樣做！

所以我的建議是將導航欄left:50%;

然后給它一個margin-left: -100px然后將-100px更改為導航寬度的一半，所以可以說它的寬度為526px，您將其設置為-263px。

而且它的寬度可能會根據設備的屏幕尺寸而變化，因此我將添加一些Javascript來更改頁面加載時的寬度，因此基本上檢查一下導航欄的寬度，然后將其除以2，並在其中添加“-”它的前面，然后是“ px” ...

我知道對於這樣一個簡單的任務來說聽起來是否太復雜，但我喜歡使用JavaScript來完成自己的工作

也有很多人會說這樣做是愚蠢的，因為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;

 }