Question

我无法将标签上的li元素左对齐，因为它们居中。我想知道是否有人可以帮助我。

我尝试了一些事情，但总是打破代码。

另外，作为一个加号，fadein对div的效果似乎不适用于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>

由于

Answer 1

添加到.tabs：

padding-left: 0;

.tabs a改变：

padding: 5px 20px;

到

padding: 5px 20px 5px 0;

它没有任何结果。

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

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

1 个答案: