Question

我有三个类似的喜欢音阶：

<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<a class="btn btn-link disabled" disabled>Not Fearsome</a>
     <button id="fear1" type="button" class="btn btn-default likert-1">1</button>
     <button id="fear2" type="button" class="btn btn-default likert-2">2</button>
     <button id="fear3" type="button" class="btn btn-default likert-3">3</button>
     <button id="fear4" type="button" class="btn btn-default likert-4">4</button>
     <button id="fear5" type="button" class="btn btn-default likert-5">5</button>
<a class="btn btn-link disabled" disabled>Extremely Fearsome</a>
</div>
</div>

CodePen

然而，希望每个刻度的第一个按钮准确地放在彼此之下，以使它们均匀。

任何简单的解决方案？

Answer 1

最简单的答案是在以下示例中使用300px在链接上放置宽度样式：

<a class="btn btn-link disabled" disabled style="width:300px">Not Fearsome</a>

这会强制所有主要语句的宽度相同。我建议添加一个类并通过CSS执行：

//css
.leftSide{width:300px}

<a class="leftSide btn btn-link disabled" disabled>Not Fearsome</a>

你也可以从按钮组中拉出链接并将它们放在他们自己的div中的每一边：

<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="col-md-2">
   <a class="btn btn-link disabled" disabled>Not Fearsome</a>
</div>
<div class="col-md-10">
<div class="btn-group" role="group" aria-label="...">

     <button id="fear1" type="button" class="btn btn-default likert-1">1</button>
     <button id="fear2" type="button" class="btn btn-default likert-2">2</button>
     <button id="fear3" type="button" class="btn btn-default likert-3">3</button>
     <button id="fear4" type="button" class="btn btn-default likert-4">4</button>
     <button id="fear5" type="button" class="btn btn-default likert-5">5</button>
</div>
</div>
<div class="col-md-2">
  <a class="btn btn-link disabled" disabled>Extremely Fearsome</a>
</div>
</div>

Answer 2

向min-width

提供a

＆＃13;

.btn-link {
  min-width: 130px
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Fearsome</a>
    <button id="fear1" type="button" class="btn btn-default likert-1">1</button>
    <button id="fear2" type="button" class="btn btn-default likert-2">2</button>
    <button id="fear3" type="button" class="btn btn-default likert-3">3</button>
    <button id="fear4" type="button" class="btn btn-default likert-4">4</button>
    <button id="fear5" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Fearsome</a>

  </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Controllable</a>
    <button id="control1" type="button" class="btn btn-default likert-1">1</button>
    <button id="control2" type="button" class="btn btn-default likert-2">2</button>
    <button id="control3" type="button" class="btn btn-default likert-3">3</button>
    <button id="control4" type="button" class="btn btn-default likert-4">4</button>
    <button id="control5" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Totally Controllable</a>

  </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Dangerous</a>
    <button id="danger1" type="button" class="btn btn-default likert-1">1</button>
    <button id="danger2" type="button" class="btn btn-default likert-2">2</button>
    <button id="danger3" type="button" class="btn btn-default likert-3">3</button>
    <button id="danger4" type="button" class="btn btn-default likert-4">4</button>
    <button id="danger5" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Dangerous</a>

  </div>
</div>

＆＃13;

Answer 3

尽管@dippas评论说这个课程并不是必需的并且是公认的答案，但事实是他的解决方案是不必要地增加每行<a>的宽度

实现您想要的简单而干净的方法是使用：

.btn-link:first-child { display:inline-block; width: 150px; }

这样，在<a>类btn-link中，您只会选择<div class="btn-group">内显示的第一个。

Answer 4

您需要添加显示属性以更改标记的宽度。

.btn-link {
    display: inline-block;   
    min-width: 110px;
}

格式化HTML按钮

4 个答案: