我有使用语义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">
从外观上看,我个人只会用简单的行更改边距:
.container .nav{
margin-top:10px;
}
这回答了你的问题吗?(我知道这看起来太简单了,令人难以置信)
我建议添加一个自定义类来<ul class='nav nav-tabs'>
<ul class="nav custom-class nav-tabs">
并为其添加底部边距
.custom-class{
margin-bottom:20px;
}
我们正在将自定义类添加到无序列表<ul>
,以便对其所做的更改不会影响使用 nav 类的其他元素
在 div.tab-content 上尝试添加类 ui 基本段
我知道它早就过期了,但是我在语义 UI 反应中寻找相同的问题时遇到了这个线程。我的解决方案是在第一个容器上方添加一个分隔线:
<Divider hidden></Divider>