CSS

Question

嗨，我正在尝试对齐下边栏元素，以便它们位于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>

END RESULT

想要的结果

Answer 1

我做了类似的事情。 CSS Grid是您应该看看的新HTML5标准之一。在您的情况下，使用 grid 相对于 flex 是更好的选择，因为您要查找的是表状结构。

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

将徽标居中
为链接创建2列网格

使徽标居中

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

因此，我们只需要进行一些简单的数学运算即可。请注意 calc（）函数，我们不想将徽标的左上角居中，而要居中。因此，我们需要删除定义的徽标宽度的一半。

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

为链接创建2列网格

要构建网格，必须将容器显示为网格并将其grid-template-columns设置为1fr 1fr。您可以将fr转换为分数。因此，在这里，我们要求将行分为2个部分。因为我们要为徽标放置一个位置，所以我们在out容器中添加了一个间隙（grid-cap），以便在两列之间留出一些空间。了解有关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>

对齐底部条形元素

CSS

HTML

END RESULT

想要的结果

1 个答案: