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

Posted 2023-03-05

【中文标题】试图将我的 UL 的一部分向左移动 [重复]

【英文标题】：Trying to move one part of my UL to the left [duplicate]

【发布时间】：2018-11-03 17:31:10

【问题描述】：

我使用简单的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>

【问题讨论】：

你试过使用引导程序吗？您将能够构建更灵活/响应更灵敏的用户界面。看到这个链接getbootstrap.com/docs/4.0/components/navbar

【参考方案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>

【讨论】：

这可能会导致在较小的屏幕上出现重叠

【参考方案2】：

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

【参考方案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 来达到预期的效果

希望这会有所帮助。

【讨论】：

您好，感谢您的回复。这确实把它放在了左边，但是现在剩下的 LI 项目不再居中，它们稍微在中心的右边

是的，你是对的，因为它仍然考虑到要分开的第一个元素。这就是为什么@GautamNaik 解决方案比我的更好；）

@AdamGamble 我添加了一些 jQuery 以使用此选项实现所需的结果。