Question

我使用以下代码为导航栏设计样式：

HTML：

sed '/#include "3rd-party/{s/>$/"/}' your_file > new_file

CSS：

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

正如我的代码段所示（https://jsfiddle.net/Wosley_Alarico/t3uhg5n1/1/）。徽标浮动在左侧，菜单向右浮动，如我所愿。但问题是菜单位于顶部并且实际上希望它位于底部。我怎样才能真正让菜单转到底部并保持向右浮动？

Answer 1

我可以看到一些问题：

对于第一个标签，没有关闭它
如果您不使用
ul不能与li一起使用，因此将其更改为div或span
移除浮动：从导航栏右侧开始，它将位于徽标的底部。
添加一个带有magin的ul类，填充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>

Answer 2

ul.navbar-right{
  float:right;
  position:relative;
  bottom:0;
}

如何内联导航栏元素

2 个答案: