在flex框css中对齐li元素

jum4pzuy 于 2022-12-30 发布在其他

关注(0)|答案(2)|浏览(167)

我正在尝试为我的UI开发侧边栏，在我的侧边栏容器中，我采用了20vw的宽度，以便它可以根据不同笔记本电脑和台式机的屏幕大小进行调整。接下来，我采用ul作为容器，进入列表项中的第一个菜单。我使用的是Flex框。

.sidebar {
  height: 100vh;
  width: 30vw;
  background-color: lightgoldenrodyellow;
  min-width: 200px;
}

ul {
  list-style: none;
  display: flex;
  flex-flow: row nowrap;
  border: 3px solid red;
  justify-content: flex-start;
  gap: 2rem;
}
li {
  background-color: #8cacea;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="sidebar">
      <ul>
        <li><i class="fa fa-balance-scale" style="font-size:24px"></i> </li>
        <li>Home</li>
        <li>+ </li>
      </ul>
    </div>
  </div>
</body>

</html>

我需要对齐图标和第2个元素的左侧和+图标的最右侧，这是不可能的，我在Flex框和第二个是，当我减少屏幕大小我的元素溢出。我不 Package 的元素，我只是想在非常小的现存收缩元素。当我使用间隙，它均匀地创建间隙所有元素，当我尝试边距左：自动它不保持在这种情况下，当我减少屏幕大小间隙不一致的间隙。请帮助解决这个问题。我需要的布局只是在购买菜单中的图像。

css

来源：https://stackoverflow.com/questions/74939882/alignment-if-li-elements-in-a-flex-box-css

2条答案

按热度按时间

flseospp1#

因为你想把前两个li移到网页的开头，我把它们放在一个公共的父span下，并相应地应用样式。
现在检查。

.sidebar {
  height: 100vh;
  width: 30vw;
  background-color: lightgoldenrodyellow;
  min-width: 200px;
}

ul {
  list-style: none;
  display: flex;
  flex-flow: row nowrap;
  border: 3px solid red;
  justify-content: space-between;
  padding: 0;
}

.child1 {
  display: flex;
}

li {
  background-color: #8cacea;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
    <body>
      <div class="container">
        <div class="sidebar">
          <ul>
            <span class="child1">
              <li>
                <i class="fa fa-balance-scale" style="font-size:24px"></i>
              </li>
              <li>Home 1</li>
            </span>
            <li>+</li>
          </ul>
          <ul>
            <span class="child1">
              <li>
                <i class="fa fa-balance-scale" style="font-size:24px"></i>
              </li>
              <li>Home 2</li>
            </span>
            <li>+</li>
          </ul>
        </div>
      </div>
    </body>
</html>

赞(0）回复(0）举报 2022-12-30

pbgvytdp2#

当想要在同一侧放置两个元素，在另一侧放置另一个元素时，我建议将两个元素组合在一起，而且我不会将每一个单独的项放在不同的列表项中。

*, *::after, *::before {
    box-sizing: border-box;  
    outline: none;
}
* {
    margin: 0;
    padding: 0;
}

.sidebar {
  height:100vh;
  width:30vw;
  background-color: lightgoldenrodyellow;
  min-width:200px;
}

ul {
  list-style: none;
  border:3px solid red;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

li {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2em;
  background-color: #8cacea;
}

li>div {
  display: flex;
  align-items: center;
  gap: 1em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  
  <div class="container">
    <div class="sidebar">
      <ul>
        <li>
          <div>
            <i class="fa fa-balance-scale" style="font-size:24px"></i> 
            <p>Home</p>
          </div>
          <p>+</p>
        </li>
        <li>
          <div>
            <i class="fa fa-balance-scale" style="font-size:24px"></i> 
            <p>Other</p>
          </div>
          <p>+</p>
        </li>
      </ul>
    </div>

赞(0）回复(0）举报 2022-12-30

我来回答

在flex框css中对齐li元素

2条答案

相关问题

热门标签

最新问答