时间戳

首页 > 解决方案 > 我想将导航栏的 UL 元素向右对齐

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

问题描述

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

我已经尝试过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元素在页面中丢失并且我的分隔线到达顶部或所有元素在右侧重叠重叠。

标签： htmlcss

解决方案

您可以通过将此 CSS 样式添加到以下这些类来尝试此操作：

.main-nav {
  float:left;
}

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

推荐阅读