0

对于大多数人来说，我有 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;
4

3 回答 3

2

这里有两点不对：

  1. 首先，你的 html 语法被破坏了。正确形成的链接应该是：

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

  2. 您将错误的样式应用于ul.language li. 而不是display: inline;给它display: inline-block;。

于 2013-06-05T10:04:38.853 回答
1

设置 ul.language li 以显示：inline-block 或浮动：左

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

or

ul.language li
{
    *display : inline;
    zoom     : 1;
    display:inline-block;
}
于 2013-06-05T09:33:53.587 回答
0

它应该是

<a href="#" title="English">English</a>
于 2013-06-05T09:32:54.687 回答