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

Question

我在标签页上对齐 li 元素时遇到了问题，因为它们是居中的。我想知道是否有人可以帮助我解决。

我尝试了一些方法，但总是破坏了代码。

此外，淡入效果在 Opera 和 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>

谢谢

- riseagainst

---

你的意思是“向左”是什么？ - Cobra_Fast

将来参考，像这样简单的问题的解决方案，如果您使用元素检查器，将变得更加明显。您可以右键单击相关区域，应该会有一个类似于“检查元素”的选项。这将允许您悬停在代码行上并查看填充和边距，以及在浏览器中快速测试解决方案。 - Cattsan

Answer 1

添加到.tabs中：

padding-left: 0;

.tabs a的变化：

padding: 5px 20px;

to

padding: 5px 20px 5px 0;

没有比这更向左了。

调试工具：http://jsfiddle.net/PRL5H/

- Cobra_Fast