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;
        }

我希望链接显示在一行中，即：[home] [contacts] [link3] 等

但目前它显示在单独的行上，例如：

[首页][联系方式]
[链接3]

我怎样才能让它们在一条线上？

4

1 回答 1

3

你已经被display: block分配到你的<a>标签。这将使每个人都在自己的路线上。删除它，它们将在同一行。

于 2013-06-11T17:18:56.487 回答