如何在列表中的文本后对齐按钮，使它们在同一列中？

Question

我不太擅长网页设计。我正在尝试显示下载软件的列表。每个列表项包含一个文本，后跟一个或多个Bootstrap按钮。我希望按钮在大文本之后紧跟在列中对齐。诸如此类的东西（不注意其他间距，而是左键对齐，这只是草稿）：

我当前代码的示例如下：

li > .column-align {
  position: absolute;
  left: 250px;
  height: 50px;
}

li {
  height: 40px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul>
  <li>
    Software 1
    <span class="column-align">
    <a class="btn btn-primary" href="https://example.com/download.exe">Download</a>
    <a class="btn btn-primary" href="https://example.com/download.exe">Download demo</a>
    </span>
  </li>
  <li>
    Software 2
    <span class="column-align">
    <a class="btn btn-primary" href="https://example.com/download.exe">Download</a>
    </span>
  </li>
  <li>
    Software 4 (Special Edition)
    <span class="column-align">
    <a class="btn btn-primary" href="https://example.com/download.exe">Download</a>
    <a class="btn btn-primary" href="https://example.com/download.exe">Download demo</a>
    </span>
  </li>
  <li>
    Software 5
    <span class="column-align">
    <a class="btn btn-primary" href="https://example.com/download.exe">Download</a>
    </span>
  </li>
</ul>

此代码或多或少有效，但是由于页面是动态生成的，因此我想避免固定左距离（位置，边距...），因此可以调整为文本/样式。我该怎么做呢？

还有，作为第二个问题：我不得不固定行高，以便不覆盖按钮，但是，除了进行硬编码之外，还使按钮不能正确地垂直对齐。有什么方法可以避免这种丑陋的解决方法？

Answer 1

尝试在行和列类中使用引导网格

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul>
  <li class="row">
    <div class="col-sm-4">Software 1</div>
    <div class="col-sm-4"><a class="btn btn-primary" href="https://example.com/download.exe">Download</a></div>
    <div class="col-sm-4"><a class="btn btn-primary" href="https://example.com/download.exe">Download demo</a></div>
  </li>
  <li class="row">
    <div class="col-sm-4">Software 2</div>
    <div class="col-sm-4"><a class="btn btn-primary" href="https://example.com/download.exe">Download</a></div>
    <div class="col-sm-4"><a class="btn btn-primary" href="https://example.com/download.exe">Download demo</a></div>
  </li>
</ul>

Answer 2

我建议您使用flexbox来完成此任务。

ul {
  display: inline-flex;
  flex-direction: column;
}

li {
  display: flex;
  height: 40px;
  align-items: center;
}
  

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul>
   <li>
      Software 1
   </li>
   <li>
      Software 2
   </li>
   <li>
      Software 4 (Special Edition)
   </li>
   <li>
      Software 5
   </li>
</ul>
<ul>
   <li>
     <a class="btn btn-primary" href="https://example.com/download.exe">Download</a>
     <a class="btn btn-primary" href="https://example.com/download.exe">Download demo</a>
   </li>
   <li>
     <a class="btn btn-primary" href="https://example.com/download.exe">Download</a>
   </li>
   <li>
     <a class="btn btn-primary" href="https://example.com/download.exe">Download</a>
     <a class="btn btn-primary" href="https://example.com/download.exe">Download demo</a>
   </li>
   <li>
     <a class="btn btn-primary" href="https://example.com/download.exe">Download</a>
   </li>
</ul>

Answer 3

另一种解决方案是使用 flexbox ，并将您的df = dd.read_csv('file.csv', names=header, dtype=types, header=0) 视为“模块”（我称为ul）并将其放在col-xx的div遵循引导网格的所有规则（如果这样做，也许更有用）。

在此示例中，我使用了software。

col-sm-12

.software {
  margin:0;
  padding:0;
}

.software li{
  margin:5px 5px 15px;
  display:flex;
  flex-direction:column;
  text-align:center;
  align-items: center;
}

/* you can change the min-width of this @media query as you want, depends of your layout */

@media (min-width: 480px) { 
  .software li{
    flex-direction:row;
    text-align:left;
  }

  .software li .title{
    width:30%; /*also here, change this % as you want*/
  }
}