Question

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

非常感谢任何见解！ KevinM

Answer 1

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

这有用（也有一些余地，所以链接不会碰到一个大词）：

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

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

Answer 2

您希望在css，.mainwrapper或.mainbar
中使用

 margin-left:30px;

将导航栏移动到div的右侧

2 个答案: