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

我个人喜欢将 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>