将<ul> <li>元素向左对齐

反对

我在将li元素对齐到选项卡的左侧时遇到麻烦,因为它们居中。我想知道是否有人可以帮助我。

我已经尝试了一些方法,但是总是会破坏代码。

另外,作为一个优点,divs上的fadein效果似乎不适用于歌剧和firefox。

这是jsfiddle:http : //jsfiddle.net/guisasso/6f6PY/

的CSS

.tabs {
border-bottom:3px #f2f2f2 solid;
}

.tabs li {
list-style:none;
display:inline;
color:#08c;
}

.tabs a {
padding:5px 20px;
display:inline-block;
background:#ffffff;
text-decoration:none;
color:#08c;
top: 3px;
font-size: 22px;
line-height: 140%;
padding-top: 10px;
background: #ffffff;
box-sizing: border-box;
position: relative;
border-radius: 4px 4px 0 0;
margin-bottom:3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;

}

.tabs a.active {
background: #ffffff;
border-bottom:3px orange solid;
color:#000000;
top:0px;
}
.tabs a:hover {
background: #f2f2f2;
top: 0px;
border-bottom:3px orange solid;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#tab1, #tab2, #tab3, #tab4 {
animation: fadein 1s;
-moz-animation: fadein 1s; /* Firefox */
-webkit-animation: fadein 1s; /* Safari and Chrome */
-o-animation: fadein 1s; /* Opera */
 }
@keyframes fadein {
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
    opacity:0;
}
to {
    opacity: 1;
}
}

的HTML

<ul class="tabs">

<li><a href='#tab1'>Tab #1</a></li>
<li><a href='#tab2'>Tab #2</a></li>
<li><a href='#tab3'>Tab #3</a></li>
<li><a href='#tab4'>Tab #4</a></li>

</ul>

<div id="tab1">111111111111111 11111111111111111 1111111111111111111 1111111111111</div>
<div id="tab2">222222222222222 22222222222222222 2222222222222222222 2222222222222</div>
<div id="tab3">333333333333333 33333333333333333 3333333333333333333 3333333333333</div>
<div id="tab4">444444444444444 44444444444444444 4444444444444444444 4444444444444</div>

谢谢

眼镜蛇

添加到.tabs

padding-left: 0;

变更.tabs a

padding: 5px 20px;

padding: 5px 20px 5px 0;

没有比这更左的了。

小提琴:http : //jsfiddle.net/PRL5H/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

样式为UL LI列表,因此所有元素垂直对齐并向左对齐?

来自分类Dev

在UL和左对齐文本中,将具有更多li元素的li元素居中

来自分类Dev

将<li>元素隐藏在<ul>中

来自分类Dev

将<li>元素隐藏在<ul>中

来自分类Dev

无法将ul li列表对齐到div的顶部

来自分类Dev

无法将ul li列表对齐到div的顶部

来自分类Dev

ProtractorJS测试是否将新的LI元素附加到UL

来自分类Dev

jQuery将li移至ul

来自分类Dev

在仅将CSS应用于UL的情况下,将所有UL LI元素排成一行,居中对齐?

来自分类Dev

在ul上右对齐li

来自分类Dev

ul li最后一个元素对齐

来自分类Dev

引导面板 ul li 元素无法在移动响应中对齐

来自分类Dev

将最后一个li扩展到ul的剩余宽度并正确对齐

来自分类Dev

如何将li附加到ul

来自分类Dev

使用appendChild将li附加到ul

来自分类Dev

将li附加到父ul

来自分类Dev

将ul滚动到特定的li

来自分类Dev

将嵌套的 ul li 转换为 json

来自分类Dev

在div内使用<ul> <li>对齐中心

来自分类Dev

在ul / li中的Treeview之前对齐项目

来自分类Dev

文字仅与UL LI中的CSS对齐

来自分类Dev

在垂直<ul>中将<li>居中对齐

来自分类Dev

如何用ul和li对齐文本

来自分类Dev

在多行中将ul中的li水平对齐

来自分类Dev

css <ul> <li>:项目的对齐方式

来自分类Dev

如何左对齐左ul li项目

来自分类Dev

将css last-child应用于不是ul li的直接子项的元素

来自分类Dev

JavaScript无法将焦点设置为ul中的第一个li元素

来自分类Dev

单击提交按钮时如何使用JavaScript将li元素添加到ul