2013-06-11 65 views
1

我有以下幾個環節:如何把鏈接在同一行[CSS]

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

我想鏈接到一個行即表明:家] [觸點] [LINK3]等

但目前其上單獨的線表示喜歡:

[家] [觸點]
[link3]

我怎樣才能讓他們在一條線上?

+0

display:inline – faester

回答

3

您有display: block分配給您的<a>標籤。這將把每一個放在他們自己的路線上。刪除它們,它們將在同一行上。

+0

works!謝謝 – IceDawg

+0

沒問題。在CSS「display」上尋找教程 - 一開始似乎讓人困惑,但一旦掌握了它,它確實不錯。 –

+0

@ Joe Enos現在他們中的兩個在一行上,其餘的在第二行:s – IceDawg