html - 制成超链接时列表元素堆叠

Question

我有 2 组代码和一个对大多数人来说相当简单的问题，尽管如此，一个问题。

有这段代码是用有效的 css 实现准备好的:

<div class="subTopHolder">
    <ul class="language">
            <li><a href="#" title="Türkçe">TR</a></li>
            <li>EN</li>
        </ul>

一旦我将 EN 变成超链接，它就会中断。结果代码:

<div class="subTopHolder">
    <ul class="language">
            <li><a href="#" title="Türkçe">TR</a></li>
            <li><a href="#" title="English">EN</a></li>
        </ul>

在这种情况下，它们不是并排站立，而是垂直堆叠。

附带的CSS代码是:

div.subTopHolder
{
    width:1002px;
    height:201px;
    margin:auto auto;
    padding:0 12px;
    position:relative;
    overflow:hidden;
    background:url(../images/bck-bannerHolder.jpg) no-repeat center top;
}

ul.language
{
    float:right;
    clear:left;
    padding:2px 0;
    margin-bottom:4px;
    cursor:default;

}
ul.language li
{
    display:inline;
    background:#f8c180;
    padding:2px 4px;
    font-size:10px;
    cursor:default;
    text-shadow:0 1px white;
    border-radius:2px;
}
ul.language li a
{
    font-size:10px;
    display:block-inline;
    background:#fff;
    color:#000;
    text-decoration:none;
    margin:-2px -4px;
    padding:2px 4px;
    border-radius:2px;


     transition:all .5s;
    -moz-transition:all .5s;
    -webkit-transition:all .5s;
}
ul.language li a:hover
{
    box-shadow:1px 1px 8px 0px black;   

Answer 1

这里有两处错误:

1. 首先，您的 html 语法有问题。正确形成的链接应该是:

   <a href="#" title="English">EN</a>
   

2. 您对 ul.language li 应用了错误的样式。将 display: inline; 改为 display: inline-block;。