Question

在提出这个问题之前我做了很多搜索，却找不到解决方法。问题：我想要一个简单的导航栏，其中一个左对齐项目，其余为右对齐。

代码：

＆＃13;

body {
  margin: 0px;
  padding: 0px;
  font-family: 'Arial', serif
}

.nav {
  font-size: 13px;
  background-color: #7a7d82;
  list-style: none;
  margin: 0px;
  padding: 0px;
  border: 1px solid;
  position: fixed;
  width: 100%;
}

.nav li {
  text-align: center;
  float: right;
}

.nav li:first-child {
  float: left;
}

.nav li a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  padding: 10px;
}

.nav li a:hover {
  background-color: #000000;
}

＆＃13;

<body>
  <div class="navbar-custom">
    <div id="navbar">
      <ul class="nav">
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </div>
  </div>

＆＃13;

我尝试过使用float，但这似乎不起作用。我希望导航栏固定在屏幕顶部。我试过拆分＆＃34; HOME＆＃34;其余的菜单项分别为<ul>标签，但似乎也无效。如果以前曾经问过这个问题，我很抱歉，但我是CSS新手，还在学习绳索。

Answer 1

浮动可以解决问题，有几种方法可以解决它：

这个小提琴使用类来实现它：

https://jsfiddle.net/vbc330Lj/

<div class="navbar-custom">
    <div id="navbar">
      <ul class="nav">
        <li class="left"><a href="#">HOME</a></li>
        <li class="right"><a href="#">CONTACT</a></li>
        <li class="right"><a href="#">PORTFOLIO</a></li>
        <li class="right"><a href="#">ABOUT</a></li>
      </ul>
    </div>
</div>

#navbar{
  position: fixed;
  top: 0;
  width: 100%;
 }
.nav li{
  margin: 0 10px;
}
.nav li.left{
  float: left;
 }
.nav li.right{
  float:right
 }

通过仅定位第一个项目（如果这是真实的用例），您也可以更加动态：

https://jsfiddle.net/2bc4j3c7/

<div class="navbar-custom">
    <div id="navbar">
      <ul class="nav">
        <li><a href="#">HOME</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">ABOUT</a></li>
      </ul>
    </div>
</div>

#navbar{
  position: fixed;
  top: 0;
  width: 100%;
 }
.nav li{
 margin: 0 10px;
}
.nav li{
 float: right
}
.nav li:first-of-type{
 float: left;
}

Answer 2

将.nav设为灵活容器（display: flex）并将margin-right: auto;应用于其第一个孩子：

＆＃13;

body {
  margin: 0px;
  padding: 0px;
  font-family: 'Arial', serif
}

.nav {
  display: flex;
  font-size: 13px;
  background-color: #7a7d82;
  list-style: none;
  margin: 0px;
  padding: 0px;
  border: 1px solid;
  position: fixed;
  width: 100%;
}
.nav li:first-child {
  margin-right: auto;
}

.nav li a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  padding: 10px;
}

.nav li a:hover {
  background-color: #000000;
}

＆＃13;

<body>
  <div class="navbar-custom">
    <div id="navbar">
      <ul class="nav">
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </div>
  </div>

＆＃13;

使用左对齐元素和右对齐元素制作自定义导航栏

2 个答案: