将<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

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

来自分类Dev

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

来自分类Dev

jQuery将li移至ul

来自分类Dev

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

来自分类Dev

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

来自分类Dev

如何将li附加到ul

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

在ul上右对齐li

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

文字仅与UL LI中的CSS对齐

来自分类Dev

ul li最后一个元素对齐

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

使用appendChild将li附加到ul

来自分类Dev

将li附加到父ul

来自分类Dev

如何用ul和li对齐文本

来自分类Dev

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

来自分类Dev

将ul滚动到特定的li

来自分类Dev

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

来自分类Dev

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

来自分类Dev

将嵌套的 ul li 转换为 json

来自分类Dev

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

来自分类Dev

如何左对齐左ul li项目