HTML-左右對齊3個元素，但如果沒有空格，則將中間元素向左對齊

Question

我有三個要素，請參見下圖

這是1080p屏幕，效果很好。 但是，在較小的屏幕上，右側與中心橫幅重疊，請參見下圖

我怎樣才能解決這個問題？ 下面是我的代碼

 <link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/> <div class="w3-container aq-purple" style="box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"> <img src="images/ficon.png" style="position:absolute;left:30px;top:4px;width:100px"> <div align="center"> <img src="fbanner.png" style="margin-top:15px;width:100%;max-width:500px;"> </div> <div style="position:absolute;right:15px;top:60px;bottom:0px"> <ul class="w3-navbar" style="position:relative;bottom:0px;height:40px"> <li> <a class="w3-hover-amber w3-border aq-border-gold" href="#"> Home </a> </li> <li> <a class="w3-hover-amber w3-border aq-border-gold" href="gallery.html"> Classes </a> </li> <li> <a class="w3-hover-amber w3-border aq-border-gold" href="events.html"> Events </a> </li> <li> <a class="w3-hover-amber w3-border aq-border-gold" href="gallery.html"> Gallery </a> </li> <li> <a class="w3-hover-amber w3-border aq-border-gold" href="donations.html"> Donate </a> </li> <li> <a class="w3-hover-amber w3-border aq-border-gold" href="contact.html"> Contact Us </a> </li> </ul> </div> 

左側的圖標和右側的導航欄正確。 中間橫幅需要在屏幕中居中。 但是，當屏幕較小時，它會重疊。 如果空間不足，我需要它移動

Answer 1

 .wrapper { display: flex; height: 3em; } ul, li { list-style: none; padding: 0 4px; } .left, .middle, .right, li { display: inline-block; height: 100%; } .left { background-color: black; flex: 0 0 3em; } .middle { background-color: brown; flex: 10 1; color: yellow; line-height: 3em; text-align: center; } .right { background-color: lightgrey; flex: 1 0; white-space: nowrap; } 

 <div class="wrapper"> <div class="left"> </div> <div class="middle">Middle middle middle </div> <div class="right"> <ul> <li><a href="#">first</a> </li> <li><a href="#">second</a> </li> <li><a href="#">third</a> </li> </ul> </div> </div>