Question

我正在尝试使用CSS在我的菜单旁边找到一个链接，因为我没有太多的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;
}

但这只会将链接放在菜单的右下角。对于很多人来说，这可能是一件容易的事，但我无法让它发挥作用。如果有人能告诉我如何做到这一点就会很棒！

Answer 1

由于你没有提供任何款式，我从头做了一个，看起来不像你的那个但你可以在那里应用相同的逻辑，将你的菜单浮到左边，这将使一些空格空对，你的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;
}

注意：我向左浮动菜单，所以不要忘记清除你的浮

Answer 2

如果您在UL之前移动DIV，它应该正确浮动

Answer 3

改为使用display:inline。

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

Answer 4

我认为没有一个独特的解决方案。我会将<ul>和<a>放在<div>内，并将样式设置为<ul>以显示内联：

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

这是因为<ul>标签的默认行为是以块显示的，因此除非您更改此行为，否则它们不允许显示除它们之外的任何内容。

Answer 5

试试这个

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

CSS：对齐菜单的链接权限

5 个答案: