響應式導航欄中的HTML詞語中斷

我正在尋找讓我的導航欄（.top-bar）比它更具響應性。目前，如果屏幕縮小那麼多，.top-bar-right類別只會降至.menu以下。我需要.top-bar-right劃分自己或打破單詞/單詞換行，如果屏幕足夠小，導航欄繼續向右推動造成不需要的空白區域。儘可能保持.top-bar-left完好無損。我已經包含與導航欄相關的HTML和CSS。先謝謝你。響應式導航欄中的HTML詞語中斷

.top-bar { 
 
    padding: 0.5rem; 
 
} 
 
.top-bar::after,.top-bar::before { 
 
    content:' '; 
 
    display: table; 
 
} 
 
.top-bar,.top-bar ul { 
 
    background-color:#333333; 
 
} 
 
.top-bar input { 
 
    width: 200px; 
 
    margin-right: 1rem; 
 
} 
 
@media screen and (min-width:40em){ 
 
    .top-bar-left { 
 
     float: left; 
 
    } 
 
    .top-bar-right { 
 
     float: right; 
 
    } 
 
} 
 
.menu>li,.menu>li>a>i,.menu>li>a>img,.menu>li>a>span { 
 
    vertical-align: middle; 
 
} 
 
.menu { 
 
    margin: 0; 
 
} 
 
.menu>li>a { 
 
    display: block; 
 
    padding: 0.7rem 1rem; 
 
    line-height: 1; 
 
} 
 
.menu a,.menu button,.menu input { 
 
    margin-bottom: 0; 
 
} 
 
.menu>li>a>i,.menu>li>a>img { 
 
    display: inline-block; 
 
    margin-right: 0.25rem; 
 
} 
 
.menu>li { 
 
    display: table-cell; 
 
} 
 
.menu.vertical>li { 
 
    display: block; 
 
} 
 
@media screen and (min-width:40em) { 
 
    .menu.medium-horizontal>li { 
 
     display: table-cell 
 
    } 
 
    .menu.medium-vertical>li { 
 
     display: block 
 
    } 
 
} 
 
@media screen and (min-width:64em){ 
 
    .menu.large-horizontal>li { 
 
     display: table-cell; 
 
    } 
 
    .menu.large-vertical>li { 
 
     display: block 
 
    } 
 
} 
 
.menu-text { 
 
    color: #FFFFFF; 
 
    line-height: 1; 
 
    padding: 0.7rem 1rem; 
 
    font-weight: 700; 
 
} 
 
html { 
 
    font-family: sans-serif; 
 
    -ms-text-size-adjust: 100%; 
 
    -webkit-text-size-adjust: 100%; 
 
} 
 
body,html { 
 
    font-size: 100%; 
 
    box-sizing: border-box; 
 
} 
 
html, body { 
 
    height:100%; 
 
    background-color: #ffffff; 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
    margin-bottom: 0; 
 
}

 
 

 
<div class="top-bar"> 
 
    <div class="top-bar-left"> 
 
     <ul class="menu"> 
 
      <li class="menu-text">Blue Hill Designs</li> 
 
     </ul> 
 
    </div> 
 
    <div class="top-bar-right"> 
 
     <ul class="menu"> 
 
      <li><a href="index.html">Home</a></li> 
 
      <li><a href="products.html">Products</a></li> 
 
      <li><a href="howto.html">How-To</a></li> 
 
      <li><a href="gallary.html">Gallary</a></li> 
 
      <li><a href="about.html">About</a></li> 
 
      <li><a href="contact.html">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
</div>

來源

2017-02-06 Connor

你能也許包括你想正是發生什麼事了一些樣機？ – ecc

我個人比較喜歡使用Flexbox的爲這樣的東西。

將所有內容都摺疊到手機屏幕的漢堡菜單中是一個不錯的主意。

如果您最終喜歡/使用flexbox，請確保您添加了我沒有添加到我的解決方案中的前綴。

li { 
 
    list-style: none; 
 
    color: white; 
 
    padding: 0; 
 
    margin-left: 10px; 
 
} 
 
li:first-child { 
 
    margin-left: 0; 
 
} 
 

 
ul { 
 
    padding: 15px; 
 
    margin: 0; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: white; 
 
    display: block; 
 
} 
 
a:hover { 
 
    color: #c9c9c9; 
 
} 
 

 
.top-bar { 
 
    background: #333; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.top-bar-right .menu { 
 
    display: flex; 
 
}

<div class="top-bar"> 
 
    <div class="top-bar-left"> 
 
     <ul class="menu"> 
 
      <li class="menu-text">Blue Hill Designs</li> 
 
     </ul> 
 
    </div> 
 
    <div class="top-bar-right"> 
 
     <ul class="menu"> 
 
      <li><a href="index.html">Home</a></li> 
 
      <li><a href="products.html">Products</a></li> 
 
      <li><a href="howto.html">How-To</a></li> 
 
      <li><a href="gallary.html">Gallary</a></li> 
 
      <li><a href="about.html">About</a></li> 
 
      <li><a href="contact.html">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
</div>

來源

2017-02-06 15:43:57 zsawaf

響應式導航欄中的HTML詞語中斷

回答

相關問題