html - 对齐底部栏元素

Question

您好，我正在尝试对齐 bottombar 元素，以便它们位于 102 一侧的 2 列中。我想知道是否有办法修复它，因为它们现在都漂浮在右侧。我是初学者 html css 程序员，我还不是很有经验。我很感激你能给我的任何帮助!

CSS

/*bottom navbar*/
.bottomnav{
  width: 100%;
  background-color: rgb(248, 138, 180);
  display: flex;
  flex-direction: row;
}

.navbarlogo2{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 10%;
  text-decoration: none;
}

/*bottombar*/
.nav {
    display: flex;
    flex-direction: row;
  }

  .left, .right {
    flex: 1;
  }

HTML

<div class="bottomnav">
            <ul class="bottomlogo">
                <li class="navbarimg2"><img class="navbarlogo2" src="img/LOGO.png"></li>
            </ul>

            <div class='nav'>
                <div class='left'>
                  <ul>
                    <li>About Us</li>
                    <li>Affiliates</li>
                  </ul>
                </div>
                <div class='right'>
                  <ul>
                    <li>TOS</li>
                  </ul>
                </div>
              </div>
        </div>

最终结果

想要的结果

Answer 1

我做了那样的事情。 CSS Grid是您应该看一看的新 HTML5 标准之一。在您的情况下，使用 grid 比 flex 更好，因为您正在寻找类似表格的结构。

我选择将您的需求分为两部分:

1. 将您的 Logo 居中
2. 为您的链接制作一个 2 列的网格

将您的 Logo 居中

我们需要将元素居中并防止它干扰我们的传入链接网格。因此，我们将使用 position: relative 设置我们的容器，并将 img 标记放在 position: absolute 中。请注意图像的 top right bottom left 属性现在相对于定位为 relative< 的第一个父级.

所以我们只需要做一些简单的数学运算。请注意 calc() 函数，我们不想将 Logo 的左上角居中，而是居中。所以我们需要删除定义的 Logo 宽度的一半。

navbarlogo2 {
  left: calc(50% - 60px);
}

为您的链接制作一个 2 列的网格

为了制作网格，您必须将容器显示为网格并将其 grid-template-columns 设置为 1fr 1fr。您可以用 fraction 翻译 fr。所以在这里，我们要求将一行分成 2 个部分。因为我们想要放置 Logo 的位置，所以我们在 out 容器中添加了一个间隙 (grid-cap)，以便在我们的 2 列之间留出一些空间。了解有关 fr 单元的更多信息 here .

body {
  margin:0
}

.bottomnav {
  width: 100%;
  background-color: rgb(248, 138, 180);
  position: relative;
}

.navbarlogo2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 120px;
  text-decoration: none;
  position: absolute;
  filter: brightness(10);
  top: 15px;
  left: calc(50% - 60px) /*center top left corner then remove half logo width (120px)*/
}

/*bottombar*/
.nav {
  display: grid;
  grid-gap: 120px;
  grid-template-columns: 1fr 1fr;
}
.nav ul {
  padding-left: 0;
}
.nav ul li {
  list-style: none;
  text-align: center;
  padding-left: 0;
}

.left,
.right {
  flex: 1;
}

<div class="bottomnav">
  <div class="bottomlogo">
    <img class="navbarlogo2" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg">
  </div>

  <div class='nav'>
    <div class='left'>
      <ul>
        <li>About Us</li>
        <li>Affiliates</li>
      </ul>
    </div>
    <div class='right'>
      <ul>
        <li>TOS</li>
        <li>Fourth </li>
      </ul>
    </div>
  </div>
</div>