主页 / 问题 / 1575790
Accepted
maindenis
Asked:2024-04-12 08:12:20 +0800 CST2024-04-12 08:12:20 +0800 CST

将按钮拉伸至宽度

  • 772

这是 HTML

<div class="inlines_pills">
    <a href="#" class="transparent_pill">Delete</a>
    <a href="#" class="transparent_pill">Edit</a>
    <a href="#" class="transparent_pill">Cancel Edit</a>
</div>

<div class="inlines_pills">
    <a href="#" class="transparent_pill">Edit</a>
    <a href="#" class="transparent_pill">Delete</a>
</div>

这是CSS

.inlines_pills {
 display: flex;
}

这是布局

在此输入图像描述

在此输入图像描述

没有布局怎么布局？

html

1 个回答

  1. Best Answer

    例子

    .inlines_pills {
  display: flex;
  margin-bottom: 1rem;
}

.transparent_pill {  
  flex-basis: 0;
  flex-grow: 1;
  padding: .5rem 1rem;
  border: 1px solid #000;
}
    <div class="inlines_pills">
    <a href="#" class="transparent_pill">Delete</a>
    <a href="#" class="transparent_pill">Edit</a>
    <a href="#" class="transparent_pill">Cancel Edit</a>
</div>

<div class="inlines_pills">
    <a href="#" class="transparent_pill">Edit</a>
    <a href="#" class="transparent_pill">Delete</a>
</div>

    • 1

相关问题