如何在一行中将徽标设置为左角，将菜单设置为右角？

Question

我想设置我的菜单，如下图所示。我在很多方面重新安排了我的代码来解决这个问题。但每次我都失败了。这个菜单的右边部分正在创造一个正确的区域。请帮我解决这个问题。

HTML CODE：

<div class="col-xs-12 bigMenu">
    <div class="col-xs-2 logo">
      <a href="#"><img src="images/logo2.png" alt="Brainwave"/></a>
    </div>
    <ul class="col-xs-10 list-unstyled list-inline">
      <li class="current"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>

CSS代码：

    .header-area .bigMenu {
        background: transparent;
    }
    .header-area .bigMenu:after {
        content: "";
        clear: both;
        display: block;
    }
    .header-area .bigMenu .logo {
        float: left;
    }
    .header-area .bigMenu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        float: right;
    }
    .header-area .bigMenu ul li {
        font-size: 1.2rem;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        padding: 0 1rem;
    }
    .header-area .bigMenu ul li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
        padding: 0px 20px;
        font-size: 1.2rem;
        letter-spacing: 0.2rem;
    }

Answer 1

只需将此样式表添加到CSS：

.col-xs-10 {
    display: block;
    float: right;
}

Here是演示。

.header-area .bigMenu {
    background: transparent;
}

.header-area .bigMenu:after {
    content: "";
    clear: both;
    display: block;
}

.header-area .bigMenu .logo {
    float: left;
}

.header-area .bigMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}

.header-area .bigMenu ul li {
    display: block;
    float: right;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 0 1rem;
}

.header-area .bigMenu ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 0px 20px;
    font-size: 1.2rem;
    letter-spacing: 0.2rem;
}

.col-xs-10 {
    width: auto;
    float: right;
}

<div class="col-xs-12 bigMenu">
    <div class="col-xs-2 logo">
      <a href="#"><img src="images/logo2.png" alt="Brainwave"/></a>
    </div>
    <ul class="col-xs-10 list-unstyled list-inline">
      <li class="current"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">About</a></li>
    </ul>
</div>