0

我正在尝试使用 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>

这将显示如下：

在此处输入图像描述

我想得到的是：

在此处输入图像描述

我试图把它放在一个 div 中并像这样对齐：

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

CSS：

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

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

4

5 回答 5

3

由于您没有提供任何样式，我从头开始制作了一个，显然看起来不像您的，但您可以在那里应用相同的逻辑，将您的菜单浮动到左侧，这将使右侧的一些空间和您的div 将向上移动，并将驻留在浮动菜单旁边，以防万一您的菜单位于页面中心，我提供了一个包装器，如果您的菜单未居中，则不需要它。

演示

<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-17T07:35:21.373 回答
1

改为使用display:inline。

<a href='logout.php' style="display:inline; float:left;">Logout</a>
于 2013-05-17T07:34:20.337 回答
1

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

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

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

于 2013-05-17T07:39:05.143 回答
0

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

于 2013-05-17T07:33:23.497 回答
0

试试这个 

<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-17T07:39:41.550 回答