语义ui构建如何将此项组合在一起

Question

好吧，上面贴着一张我想用语义ui构建的元素的图片，但是花了数小时试图弄清楚之后，我却无法使它工作。

有什么想法吗？在 JSFiddle中，我将寻找答案。

<div class='items'>
  <div class='item'>
    <div class='ui buttons'>
      <button class='ui labeled button'>
        <a class='ui basic label'>File name</a>
        <div class='ui progress bottom attached'>
        <div class='bar'></div>
      </div>
      </button>
      <button class='ui basic icon button'>
        <i class='sync icon'></i>
      </button>

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

<div style='border: 2px red solid; width: auto; padding: 0px;'>
  <div style='display: inline-block;'>
    <p>Filename</p>
    <progress max=100 value=20></progress>
  </div>
  <div style='display: inline-block; vertical-align: top;' class='ui basic icon button'>
    <i class='ui icon sync'></i>
  </div>
</div>

Answer 1

首先，在div内插入button在语义上是错误的，因此应该使用措辞内容，请参见HTML button element和HTML Phrasing content。您将需要删除<button class='ui labeled button'>内的div或执行其他方法。

您可以使用flexbox达到期望的结果，请参见：https://www.w3schools.com/css/css3_flexbox.asp

或者更好的是，您可以应用语义UI GRID：https://semantic-ui.com/collections/grid.html

.progress-wrapper {
    display: flex;
}
.progress-wrapper .ui.progress{
    margin-bottom: 0 !Important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.3/dist/semantic.min.css">
<div class='items'>
  <div class='item'>
       <div class="progress-wrapper">
          <div class="progress-wrap">
          <a class='ui basic label'>File name</a>
          <div class='ui progress'>
            <div class='bar' style="width: 12%;">
              <div class="progress">12%</div>
            </div>
          </div>
        </div>
        <button class='ui basic icon button'>
          <i class='sync icon'></i>
        </button>
      </div>
  </div>
</div>