応答のあるナビゲーションバーでHTMLの単語区切り

Question

私は自分のナビゲーションバー（.top-bar）をそれよりも反応させたいと考えています。現在、クラス.top-bar-rightは、画面がそれほど縮小していない場合、クラス.menu以下にしか落ちません。画面が小さくて、ナビゲーションバーが不必要な空白を作るのを押し続けるのであれば、自分自身を分割したり、単語/折り返しを区切るには.top-bar-rightが必要です。可能であれば.top-bar-leftをそのまま維持します。ナビゲーションバーに関連するHTMLとCSSの両方が含まれています。前もって感謝します。

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

Answer 1

私個人的にはそのようなもののためにフレキシボックスを使用してのように。

モバイル画面用のハンバーガーメニューにすべてが崩壊するのは良い考えです。

フレックスボックスを好きになったら、自分のソリューションに追加しなかったプレフィックスを追加してください。

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>