Question

几天前，我正在制作经典菜单。它左侧有一个徽标，右侧有一些菜单按钮。这是我的第一次尝试 - fiddle1。但是来自这个社区的人告诉我，菜单通常没有这样的编码，而是<ul>和<li>。

所以我尝试重建该菜单 - fiddle2。不幸的是，没有任我的第一个问题是我感觉<div id="menubuttons">找不到 IN <div id="header">。第二个问题是<div id="menubuttons" align="right">没有正确对齐。

您能否帮助我使用<ul>和<li>代码获取fiddle1的视觉效果？

Answer 1

默认情况下，

ul元素将占用保证金

所以请像这样添加css，它会删除默认的边距和填充

ul{margin:0; padding:0}
#menubuttons { float:right}

选中此Demo

Answer 2

我更改了一些代码，试试这个： http://jsfiddle.net/WnneG/

<ul style="float:left;paddin:0px;margin:0px;">
                <li class="menubutton"> <a href="">Home</a>

                </li >
                <li  class="menubutton">    <a href="">Info</a>

                </li>
                <li  class="menubutton">    <a href="">Spenden</a>

                </li >
                <li  class="menubutton" align="right" style="margin-right: 20px;">  <a href="">Kontakt & Impressum</a>

                </li >
            </ul>

Answer 3

查看您发布的小提琴中的代码。您尝试从div创建菜单，而您尝试访问的菜单包含<li>项float: left;

Answer 4

将<li>标记样式display:block;float:right;添加为<li style="display:block;float:right">

Answer 5

使用float = right而不是对齐div menubuttons。

#menubuttons {
    margin-right: 0;
    margin-top: 0;
    height: 2.5em;
    line-height: 2.5em;
    display: block;
    float:right;
}

Answer 6

我创建了一个菜单版本。我认为这有助于：http://jsfiddle.net/yBTJF/4/

.menu 
{
    height: 30px;
    background: #FFFFFF;
    line-height: 30px;
    list-style: none;
    padding: 0 5px;
    margin: 0px;
}

如果你想要:hover，你所要做的就是在你的CSS中创建一个选择器：

.menu a:hover
{
    // ...
}

Answer 7

替换这行代码：

<div id="header_logo" align="left">
      <img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
 </div>
 <div id="header_menu" align="right">

使用：

<div id="header_logo" style="float:left;">
                <img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
            </div>
            <div id="header_menu" style="float:right;">

希望你能得到你想要的结果如果有这个帮助你请把它标记为绿色

为什么align =“right”不起作用？

7 个答案: