CSS：對齊菜單右側的鏈接

我嘗試使用CSS獲取我的菜單旁邊的鏈接，因爲我沒有太多的CSS使用經驗我無法使其工作。目前該鏈接位於菜單的左下角。 Menu和鏈接的代碼是這樣的：CSS：對齊菜單右側的鏈接

<div id="content"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 
<script type="text/javascript" src="jquery-1.2.6.min.js"></script> 
<script type="text/javascript" src="kwicks.js"></script> 
<script type="text/javascript" src="custom.js"></script> 
</head> 
<body> 
<ul class="kwicks"> 
    <li id="kwick1"><a href="index.php">Home</a></li> 
    <li id="kwick2"><a href="klanten.php">Klanten</a></li> 
    <li id="kwick3"><a href="nieuwsbrieven.php">Nieuwsbrieven</a></li> 
    <li id="kwick4"><a href="subscriptions.php?page=1">Subscriptions</a></li> 
</ul> 
<A href='logout.php'>Logout</A> 
</div>

這將顯示如下：

enter image description here

我想獲得的是：

enter image description here

我試圖把它放在一個div，並像這樣對齊：

<div class="right"> 
<A href='logout.php'>Logout</A> 
</div>

的CSS：

.right { 
text-align: right; 
float: right; 
}

但這隻會把鏈接在菜單的右下角。這對你來說可能是一件容易的事情，但我無法讓它工作。如果任何人都可以告訴我如何做到這一點，那就太棒了！

來源

2013-05-17 Daanvn

如你沒有提供任何的風格，我做了一個從無到有，看起來並不像你明明但你可以有應用相同的邏輯，浮你的菜單到左，這將使一些空格在右側，你的div將向上移動，並且除了漂浮的菜單之外還會駐留，以防萬一你的菜單居中在頁面上，我提供了一個包裝器，如果你的菜單不需要不居中。

Demo

<div class="holder"> 
    <ul> 
     <li>Home</li> 
     <li>Menu</li> 
    </ul> 
    <div>Logout</div> 
</div> 

.holder { 
    width: 150px; 
    margin: auto; 
} 

ul { 
    float: left; 
} 

ul li { 
    display: inline-block; 
    margin-right: 5px; 
}

注：我浮動菜單向左，所以不要忘了清除漂浮

來源

2013-05-17 07:35:21

心動不如用這個，日Thnx工作！ – Daanvn

@Daanvn歡迎你:) –

如果移動應該浮動權正確

來源

2013-05-17 07:33:23

使用display:inline代替UL前DIV。

<a href='logout.php' style="display:inline; float:left;">Logout</a>

來源

2013-05-17 07:34:20 Nitesh

我覺得有沒有一個獨特的解決方案。我會把<ul>和<a>在一起<div>和定式的<ul>裏面內嵌顯示：

<ul class="kwicks" style="display: inline;">

這是因爲<ul>標籤的默認行爲是要顯示在數據塊，因此他們不」除非您改變此行爲，否則允許顯示其他任何內容。

來源

2013-05-17 07:39:05 JordiVilaplana

試試這個

<ul class="kwicks"> 
    <li id="kwick1"><a href="index.php">Home</a></li> 
    <li id="kwick2"><a href="klanten.php">Klanten</a></li> 
    <li id="kwick3"><a href="nieuwsbrieven.php">Nieuwsbrieven</a></li> 
    <li id="kwick4"><a href="subscriptions.php?page=1">Subscriptions</a></li> 
    <li class="right"><A href='logout.php'>Logout</A></li> 
</ul>

來源

2013-05-17 07:39:41

CSS：對齊菜單右側的鏈接

回答

相關問題