Question

我有我用semantic-ui渲染的列表，并且它需要一些边距到第一个元素的顶部。我查看了CSS代码并看到margin-top:0!important，我可以使用margin-top:10px!important;覆盖第一个元素，然后渲染看起来很好。有没有更好的方法来实现它？我的代码（没有修复）是

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <ul class="nav nav-tabs">
    <li class="nav active"><a href="#A" data-toggle="tab">All</a>
    </li>
    <li class="nav"><a href="#B" data-toggle="tab">Company</a>
    </li>
    <li class="nav"><a href="#C" data-toggle="tab">Private</a>
    </li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane fade in active" id="A">
      <div class="ui divided items">
        <div class="item">
          <div class="ui left floated">
            7 July.
            <br>3:33
          </div>
          <div class="image">
            <a href="/vi/5022701123010560.html">
              <img src="http://lh3.googleusercontent.com/JZkr-b_aWlYrFG1G-EUywZgucJE3JV1wgz4yQGrx-bGaw_va7dymsaTMXhK5t6ZkUdjWLeHlNaiksVNAMp8I1epB-Q=s150" title="Wordpress development company, website developer" alt="Wordpress development company, website developer">
            </a>
          </div>
          <div class="content">
            <a class="header" href="/vi/5022701123010560.html">Wordpress development company, website developer</a>
            <div class="meta">
              <span class="price"></span>
            </div>
            <div class="description">
              <p>Dit Interactive have experts wordpress ...</p>
            </div>
            <div class="extra">
              <div class="ui label">
                Services
              </div>
              <div class="ui label">
                For sale
              </div>
              <div class="ui label">Central NJ</div>
              <div class="ui label">New Jersey</div>
              <div class="ui right floated primary button">
                Buy now
                <i class="right chevron icon"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="ui left floated">
            7 July.
            <br>0:54
          </div>
          <div class="image">
            <a href="/vi/5870511561113600.html">
              <img src="http://lh3.googleusercontent.com/rsfBseoSy-KPg6P703Dknbpd0t2Ug4n2BY8oKkg2XH5dkufstmZXMWSCsHTU4C0yb7bIaMBpAFxILaW6W3lZsiCt=s150" title="Dentist in Westminster" alt="Dentist in Westminster">
            </a>
          </div>
          <div class="content">
            <a class="header" href="/vi/5870511561113600.html">Dentist in Westminster</a>
            <div class="meta">
              <span class="price"></span>
            </div>
            <div class="description">
              <p>Pari J. Moazed, DDS is a family dentist ...</p>
            </div>
            <div class="extra">
              <div class="ui label">
                Services
              </div>
              <div class="ui label">
                For sale
              </div>
              <div class="ui label">Baltimore</div>
              <div class="ui label">Maryland</div>
              <div class="ui right floated primary button">
                Buy now
                <i class="right chevron icon"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

这个“解决方案”有效，但我不喜欢它

<div {% if loop.index0 == 0 %}style="margin-top:10px!important"{% endif %} class="item">

Answer 1

我建议将自定义类添加到<ul class='nav nav-tabs'>

 <ul class="nav custom-class nav-tabs">

并在其中添加margin-bottom

.custom-class{ 
    margin-bottom:20px;
 }

我们正在向无序列表<ul>添加自定义类，以便对其进行的更改不会影响使用 nav 类的其他元素

Answer 2

从表面上看，我个人只需用简单的线条改变边距：

.container .nav{
  margin-top:10px;
}

这是否回答了你的问题？（我知道这看起来太简单了）

Answer 3

在 div.tab-content 上尝试添加课程 ui基本片段

为第一个元素

3 个答案: