Question

对于大多数人来说，我有两组代码和一个相当简单的问题，然而，这是一个问题。

这段代码已准备就绪，可以使用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

这里有两件事是错的：

首先，您的html语法已损坏。正确形成的链接应为：
```
<a href="#" title="English">EN</a>
```
您已将错误的样式应用于ul.language li。而不是display: inline;给它display: inline-block;。

Answer 2

将ul.language li设置为display：inline-block或float：left

ul.language li
{
// with ie hack
    display:inline;
    float : left;
    zoom : 1;
}

or

ul.language li
{
    *display : inline;
    zoom     : 1;
    display:inline-block;
}

Answer 3

应该是

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

将项目堆叠成超链接时列出

3 个答案: