Question

我希望导航栏中的所有内容（徽标除外）都应与右侧对齐（最终应替换为图像）。徽标应在左侧。

我已经尝试过float:left，text-align，但似乎没有任何作用。

这是代码：

.main-nav {
  display: flex;
  list-style: none;
  font-size: 0.5em;
  text-transform: uppercase;
  font-family: 'Raleway', sans-serif;
  margin: 0;
}

.bike-nav {
  display: flex;
  list-style: none;
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 0.7em;
  margin: 0;
}

ul {
  text-align: right;
}

li {
  padding: 20px;
  text-align: right;
}

a {
  color: #FFFFFF;
  text-decoration: none;
}

#separador {
  width: 615px;
  border-top: 2px solid white;
  margin-left: auto;
  top: 100px;
}

.black {
  background: #000000;
}

<nav class="zone black">
  <ul class="main-nav">
    <li><a href="">Logo</a></li>
    <li><a href="">View Cart</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">Login</a></li>
  </ul>
  <div id="separador"></div>
  <ul class="bike-nav">
    <li><a href="">Siamese</a></li>
    <li><a href="">Sphynx</a></li>
    <li><a href="">Bengal</a></li>
  </ul>
</nav>

我希望所有内容都在浮动或文本对齐的右边，但是碰巧UL元素在页面中丢失，而分隔线却在顶部，或者所有元素都重叠在右边。

Answer 1

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

nav.zone {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  text-align: right;
  justify-content: flex-end;
  border-bottom: 1px solid #ddd;
  padding: 15px 0px;
}

nav.zone li {
  list-style: none;
  display: inline-block;
}

nav.zone .right {
  display: inline-flex;
  text-align: right;
}

nav.zone li a {
  padding: 0 15px;
  color: #000;
  text-decoration: none;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>I want to align the UL elements of the NAVBAR to the right</title>

</head>

<body>
  <div style="max-width: 800px; margin: 15px auto; padding: 0  15px;">
    <nav class="zone black">
      <div class="right">
        <ul class="main-nav">
          <li><a href="">Logo</a></li>
          <li><a href="">View Cart</a></li>
          <li><a href="">Contact</a></li>
          <li><a href="">Login</a></li>
        </ul>
        <div id="separador"></div>
        <ul class="bike-nav">
          <li><a href="">Siamese</a></li>
          <li><a href="">Sphynx</a></li>
          <li><a href="">Bengal</a></li>
        </ul>
      </div>
    </nav>
  </div>
</body>

</html>

Answer 2

您可以通过将CSS样式添加到以下这些类中来进行尝试：

.main-nav {
  float:left;
}

#separador {    
  float:left;
  margin-top: 30px; /* Use margin-top to replace for top: 100px; */
}

Answer 3

从ul / li列表中删除徽标并设置2个带有justify-content的列表：flex-end;

flex-end物品位于容器的末端 https://www.w3schools.com/cssref/css3_pr_justify-content.asp

#logo{
  padding: 20px;  
  position:absolute;
}
.main-nav{
  display: flex;
  list-style: none;
  font-size: 0.5em;
  text-transform: uppercase;
  font-family: 'Raleway', sans-serif;
  margin: 0;
 justify-content:flex-end;
}
.bike-nav {
  display: flex;
  list-style: none;
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 0.7em;
  margin: 0;
  justify-content:flex-end;
 }
ul {
  text-align: right;
}
li {
  padding: 20px;  
  text-align: right;
}
a {
  color: #FFFFFF;
  text-decoration: none;
}
 #separador {
  width:100%;
  border-top: 2px solid white;
  margin-left: auto;
  top: 100px;
}
.black {
  background: #000000;
}

  <nav class="zone black">
    <div id="logo"><a href="">Logo</a></div>
    <ul class="main-nav">
        <li><a href="">View Cart</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Login</a></li>
    </ul>
    <div id="separador"></div>
    <ul class="bike-nav">
        <li><a href="">Siamese</a></li>
        <li><a href="">Sphynx</a></li>
        <li><a href="">Bengal</a></li>
    </ul>

Answer 4

尝试使用display: flex;完成此操作。希望这段代码对您有帮助

.main-nav {
  font-size: 0.5em;
  text-transform: uppercase;
  font-family: 'Raleway', sans-serif;
}

.bike-nav {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 0.7em;
}

ul {
  list-style: none;
  text-transform: uppercase;
}

li {
  padding: 5px 20px;
}

a {
  color: #FFFFFF;
  text-decoration: none;
}

.separator {
  width: 615px;
  border-top: 2px solid white;
  margin-left: auto;
}

.black {
  background: #000000;
}

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.align-items-center {
  align-items: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-end {
  justify-content: flex-end;
}

.logo {
  color: white;
  margin-left: 15px;
}

<nav class="zone black">
  <div class="d-flex flex-row align-items-center justify-content-between">
    <div class="logo">
      Logo
    </div>
    <ul class="d-flex flex-row align-items-center main-nav">
      <li><a href="">View Cart</a></li>
      <li><a href="">Contact</a></li>
      <li><a href="">Login</a></li>
    </ul>
  </div>

  <div class="separator"></div>
  <ul class="d-flex flex-row align-items-center justify-content-end bike-nav">
    <li><a href="">Siamese</a></li>
    <li><a href="">Sphynx</a></li>
    <li><a href="">Bengal</a></li>
  </ul>

</nav>

我想将导航栏的UL元素向右对齐

4 个答案: