将导航栏移动到 div 的右侧答案

【问题标题】：Move nav bar to the right side of div将导航栏移动到 div 的右侧
【发布时间】：2016-05-31 00:48:22
【问题描述】：

我是 CSS 新手，我正在尝试将导航栏移动到 div 包装器的右侧。我在左侧有一个徽标图像，并且想要右侧的导航栏。当我使用float: right 时，导航栏位于 div 的右侧。但是，每个水平的按钮都会在列表中恢复为垂直状态。

查看示例：

我读过可以纠正这个问题，将position: relative 用于父包装器，然后将position: absolute 用于导航栏。但我试图找出为什么 float: right 属性会垂直移动所有按钮。

这是我的代码：``

.mainwidth{
   width:100%;
   border-bottom: 3px solid #0099FF;
   float:left;
   }

.mainwrapper {
  width: 1200px;
  margin: auto;
}
.mainwrapper img {
  margin-top: 30px;
  float: left;
}
.mainbar ul {
  list-style-type: none;
  box-sizing: border-box;
  background-color: orange;
  float: right;
}
.mainbar ul li a {
  display: block;
  text-decoration: none;
  color: #0099FF;
  text-align: center;
  float: left;
}

 <!doctype html>
 <html>
	<head>
		<meta charset="utf-8">
		<title>Agency</title>
		<link href="index.css" rel="stylesheet">
		<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
	</head>
<body>
<div class=“wrapperwidth”>
<div class="mainwrapper">
  <img src="logo/holoslogo2.png" alt="Logo Holos">

  <div class="mainbar">
    <ul>
      <li> <a href="">HOME</a>
      </li>
      <li> <a href="">Services</a>
      </li>
      <li> <a href="">Company</a>
      </li>
      <li> <a href="">Clients</a>
      </li>
      <li> <a href="">CONTACTO</a>
      </li>
      <li><a href="http://facebook.com" class="facebook">Facebook</a>
      </li>
      <li><a href="http://twitter.com" class="twitter">Twitter</a>
      </li>
      <li><a href="http://youtube.com" class="youtube">Youtube</a>
      </li>
    </ul>
  </div>
</div>
</div>

   </body>
   </html>

非常感谢任何见解！凯文M

【问题讨论】：

更改 .main ul li --> display: block 为 display: inline-block
你能把剩下的 HTML 贴出来吗？
嗨@APAD1，我已经添加了 HTML 的其余部分。
@drWisdom 我也试过了，但按钮仍然是垂直的而不是水平的。
相关：stackoverflow.com/questions/24636335/…

标签： html css

【解决方案1】：

您可以在 css、.mainwrapper 或 .mainbar 中使用的地方

 margin-left:30px;

【讨论】：

【解决方案2】：

您需要将列表项设置为内联块。其他一切都可以保持阻塞，这不是问题。

这行得通（还有一些边距，所以链接不会变成一个大字）：

.mainbar li {
  display: inline-block;
  margin-right: 1em;
}

你也可能不需要在你的 ul 周围包裹一个 div。您可以将 .mainbar 类直接放在 ul 上，将 ul 从 CSS 中取出，然后将其浮动 - 其余的浮动是多余的。但我离题了。

【讨论】：