试图将我的 UL 的一部分向左移动 [重复]

Question

我使用简单的UL 作为我的navbar，并且我试图将UL 的1 项分开并将其放在页面的左侧，并将其他3 项保持居中，但是我似乎无法让它工作。我尝试将它包装在一个跨度中并使其浮动，我尝试制作一个新的 UL，但这只会导致它们位于不同的行上。

我实际上只是希望主页按钮向左对齐，其余按钮居中。也许我遗漏了一些明显的东西。

ul {
    list-style-type: none;
    margin: 10px 0 0 0 ;
    padding: 0;
    text-align: center;
}

li {
    display: inline;
    padding: 0 15px;
}

a {
    color: black;
    text-decoration: none;
    font-size: 30px;
}

<div class="navbar">
<nav>
    <div>
        <ul>
            <li id="homepage"><a href="#">AG Designs</a></li>
            <li id="aboutmebutton"><a href="#">About Me</a></li>
            <li id="portfoliobutton"><a href="#">Portfolio</a></li>
            <li id="contactbutton"><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>

Answer 1

这是一个解决方案，使第一项绝对位置

将此添加到您的 css 中

#homepage {
  position:absolute;
  left: 0;
}

这样做，它会将接下来的 3 个项目居中到页面的中心，并将主页 div 向左推

以全页视图打开以下sn-p

ul {
  position:relative;
  list-style-type: none;
  margin: 10px 0 0 0;
  padding: 0;
  text-align: center;
}

li {
  display: inline;
  padding: 0 15px;
}

a {
  color: black;
  text-decoration: none;
  font-size: 20px;
}

#homepage {
  position:absolute;
  left: 0;
}

<div class="navbar">
  <nav>
    <div>
      <ul>
        <li id="homepage"><a href="#">AG Designs</a></li>
        <li id="aboutmebutton"><a href="#">About Me</a></li>
        <li id="portfoliobutton"><a href="#">Portfolio</a></li>
        <li id="contactbutton"><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>

Answer 2

添加 样式=“填充左：50px；” 在你的第二个里

Answer 3

您可以选择第一个孩子并将其浮动到左侧，如下所示：

li:first-child {
  float: left;
}

编辑： 添加了 jQuery 以实现所需的结果。它计算第一个元素的宽度并删除第二个li 元素的左边距。

完整代码如下：

var firstChildWidth = $( "#homepage" ).width();

$( "ul li:nth-child(2)" ).css( "margin-left", -firstChildWidth + "px" );

.navbar {
  background-color: yellow;
}

ul {
  list-style-type: none;
  margin: 10px 0 0 0 ;
  padding: 0;
  text-align: center;
}

li {
  display: inline;
  padding: 0 15px;
}

li:first-child {
  float: left;
  padding: 0px;
}

a {
  color: black;
  text-decoration: none;
  font-size: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
  <nav>
      <div>
          <ul>
              <li id="homepage"><a href="#">AG Designs</a></li>
              <li id="aboutmebutton"><a href="#">About Me</a></li>
              <li id="portfoliobutton"><a href="#">Portfolio</a></li>
              <li id="contactbutton"><a href="#">Contact</a></li>
          </ul>
      </div>
  </nav>
</div>

编辑：添加了一些 jQuery 来达到预期的效果

希望这会有所帮助。