响应式导航栏中的HTML单词中断

Question

我希望我的导航栏（.top-bar）比现在更具响应性。目前，如果屏幕缩小太多，则课程.top-bar-right仅降至课程.menu以下。如果屏幕足够小以至于导航栏一直向右推动以产生不需要的空白区域，我需要.top-bar-right来划分自己或打破单词/自动换行。同时尽可能保持.top-bar-left完好无损。我已经包含了与导航栏相关的HTML和CSS。提前谢谢。

＆＃13;

＆＃13;

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

＆＃13;

    

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我个人喜欢使用flexbox这样的东西。

将所有内容整理成移动屏幕的汉堡菜单会是一个好主意。

如果你最终喜欢/使用flexbox，请确保添加前缀，我没有添加到我的解决方案中。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;