响应式导航栏中的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词语中断

回答

相关问题