Question

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

我确实希望主页按钮与左边对齐，其余按钮要居中。也许我错过了一些明显的东西。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

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

将此添加到ur css

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

这样做，它会将接下来的3个项目置于页面中心，然后将主页div推向左侧

在整页视图中打开以下代码段

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

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

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来实现所需的结果

希望这有帮助。

Answer 3

添加风格=“填充左：50像素;” 在你的第二个李

试图将我的UL的一部分移到左侧

3 个答案: