css 如何对齐列表中的图标和按钮

8fq7wneg 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(125)

我有一个可折叠的列表，如图所示。我试图将所有的右箭头图标都对齐到末尾，这样它们就都在同一个y轴上对齐了。
我想使用flexbox或者其他不涉及左边距的干净解决方案来实现这一点：等等。
我尝试过向.fa-caret-right类添加对齐和对齐属性，但没有成功。
下面是我的HTML代码：

<div class="sec3">
      <ul class="sec2drop">
        <li>
          <button class="collapsible">
            Prepare for a language exam
            <i class="fa fa-caret-right"></i>
          </button>
        </li>
        <li>
          <button class="collapsible" id="collapsible2">
            Hungarian for kids <i class="fa fa-caret-right"></i>
          </button>
        </li>
        <li>
          <button class="collapsible" id="collapsible3">
            Take on a challenge <i class="fa fa-caret-right"></i>
          </button>
        </li>
        <li>
          <button class="collapsible" id="collapsible4">
            Translation services <i class="fa fa-caret-right"></i>
          </button>
        </li>
      </ul>
    </div>

下面是我的CSS代码：

.sec2drop li {
  list-style: none;
  border-top: 1px solid rgb(161, 159, 159);
  line-height: 50px;
}

.collapsible {
  background-color: transparent;
  cursor: pointer;
  padding: 18px;
  border: none;
  font-size: 15px;
}

css

来源：https://stackoverflow.com/questions/75747427/how-to-align-icons-and-buttons-inside-a-list

1条答案

按热度按时间

6ie5vjzr1#

您需要为按钮中的文本添加另一个标签。这样您就可以分别控制文本和图标。您可以使用弹性增长，因为文本可以增长，而图标不会增长。

.sec2drop li {
  list-style: none;
  border-top: 1px solid rgb(161, 159, 159);
  line-height: 50px;
}

.collapsible {
  background-color: transparent;
  cursor: pointer;
  padding: 18px;
  border: none;
  font-size: 15px;
  display: flex;
  width:100%;

}

.collapsible .text {
  text-align: left;
  flex-grow: 1;
}

.collapsible i {
 
}

<div class="sec3">
  <ul class="sec2drop">
    <li>
      <button class="collapsible">
        <span class="text"> Prepare for a language exam</span>
        <i class="fa fa-caret-right">></i>
      </button>
    </li>
    <li>
      <button class="collapsible" id="collapsible2">
        <span class="text"> Hungarian for kids </span><i class="fa fa-caret-right">></i>
      </button>
    </li>
    <li>
      <button class="collapsible" id="collapsible3">
        <span class="text"> Take on a challenge </span><i class="fa fa-caret-right">></i>
      </button>
    </li>
    <li>
      <button class="collapsible" id="collapsible4">
        <span class="text"> Translation services </span><i class="fa fa-caret-right">></i>
      </button>
    </li>
  </ul>
  </div

赞(0）回复(0）举报 2023-03-20

我来回答

css 如何对齐列表中的图标和按钮

1条答案

相关问题

热门标签

最新问答