格式化HTML按钮

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

给min-width给你的a

​

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

<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>

​

Answer 2

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

<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 3

尽管@dippas评论说这个类是不需要的，并且是公认的答案，但事实是，<a>的解决方案正在增加每一行的最后一个的宽度，这是不必要的。

要实现您想要的目标，一种简单而干净的方法是使用：

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

这样，在具有类<a>的btn-link中，您将只选择出现在<div class="btn-group">中的第一个。