1

次のリンクがあります：

<div class="links">
    <a href="Default.aspx" class="kustomborder">Home</a>
    <a href="#">About Me</a>
    <a href="#">Contacts<span></span></a>
  <a href="#">Contact Author</a>

    <div class="link">

    </div>
</div>

このcssファイルで：

 .links {
    height: 50px;
    display: inline;
        text-align: center;
        padding: 0px 0px 0px 170px;
        margin-right: 0px;
        margin-top: 7px;
        border: none;
        line-height: 25px;
}
    .links a {
        background: #ffffff; /* Old browsers */
        background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
        background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        color: black;
        font-family: Calibri;
        font-size: 13px;
        text-decoration: none;
        padding: 2px 10px;
        border: 1px solid #ccc;
    }

        .links a span {
            width: 0;
            height: 0;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-top: 3px solid #555;
            display: inline-block;
            margin: 2px 7px;
        }

リンクを1行で表示したい：[home] [contacts] [link3]など

しかし、現在、次のような別の行に表示されています。

[ホーム][連絡先]
[link3]

どうすればそれらを1行で取得できますか?

4

1 に答える 1

3

タグがdisplay: block割り当てられました<a>。これにより、それぞれが独自の行に配置されます。それを削除すると、それらは同じ行になります。

于 2013-06-11T17:18:56.487 に答える