Как выровнять кнопки после текста в списке, чтобы они находились в одном столбце?

Question

Я не очень хорошо разбираюсь в веб-дизайне.Я пытаюсь показать список для загрузки программного обеспечения.Каждый элемент списка содержит текст, за которым следуют одна или несколько кнопок начальной загрузки.Я хочу, чтобы кнопки были выровнены, как в столбце, сразу после самого большого текста.Что-то вроде (не обращайте внимания на другие интервалы, кроме выравнивания левой кнопки, это всего лишь черновик):

Пример моего текущего кода:следующим образом:

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 как «модуль» (который я называю software) и помещать его в div col-xx, который следует всем правиламсетка начальной загрузки (если вы это сделаете, возможно, она более полезна).

В этом примере я использовал 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*/
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-12">

      <ul class="software">
        <li>
          <span class="title">Software 1</span>
          <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>
          <span class="title">Software 2</span>
          <span class="column-align">
            <a class="btn btn-primary" href="https://example.com/download.exe">Download</a>
          </span>
        </li>
        <li>
          <span class="title">Software 4 (Special Edition)</span>
          <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>
          <span class="title">Software 5</span>
          <span class="column-align">
            <a class="btn btn-primary" href="https://example.com/download.exe">Download</a>
          </span>
        </li>
      </ul>

    </div>
  </div>
</div>

Answer 3

Я рекомендую вам использовать 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>