html - 如何内联导航栏元素

Question

我使用以下代码对导航栏进行样式化:

HTML:

<div>
  <ul class="navbar-brand">
    <a href='https://postimg.org/image/ukcombaed/' target='_blank'><img src='https://s10.postimg.org/7vnhmqt0p/IMG_20160804_WA032.jpg' border='0' alt='IMG-20160804-WA032'/><br /><a target='_blank' href='https://postimage.org/'>    </a><br /><br />
  </ul>
  <ul class="navbar-right">
    <li>home</li>
    <li>about</li>
    <li>delivery</li>
    <li>services</li>
  </ul> 
</div>

CSS:

ul{
  list-style:none;
  display:inline;
}
li{
  list-style: none;
  display: inline;
  width:100%;
  padding: 10px;
}
ul.navbar-brand{
  float:left;
}
ul.navbar-right{
  float:right;
}

如我的代码片段所示 ( https://jsfiddle.net/Wosley_Alarico/t3uhg5n1/1/ )。 Logo float 到左侧，菜单 float 到我想要的右侧。但问题是菜单位于顶部，实际上希望它位于底部。我怎样才能真正让菜单转到底部并保持它向右浮动？

Answer 1

我可以看到几个问题:

1. 第一个标签没有关闭
2. 如果你不使用，你可以删除 2nd a
3. ul 不能和 li 一起使用，所以改成 div 或 span
4. 从 navbar-right 类中删除 float:right 它将出现在 Logo 的底部。
5. 添加一个带有 magin 的 ul 类，padding 0

ul{
  list-style:none;
  display:inline;
  margin:0;
  padding:0;
}
li{
  list-style: none;
  display: inline;
  width:100%;
  padding:10px 10px 10px 0;
}
ul.navbar-brand{
  float:left;
}
ul.navbar-right{
}

<div>
  <div class="navbar-brand">
    <a href='https://postimg.org/image/ukcombaed/' target='_blank'><img src='https://s10.postimg.org/7vnhmqt0p/IMG_20160804_WA032.jpg' border='0' alt='IMG-20160804-WA032'/></a>
  </div>
  <ul class="navbar-right">
    <li>home</li>
    <li>about</li>
    <li>delivery</li>
    <li>services</li>
  </ul>
  
</div>