1

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

所以我试图重建那个菜单——fiddle2。不幸的是，没有任何效果。我的第一个问题是<div id="menubuttons">我感觉<div id="header">. 第二个问题是它<div id="menubuttons" align="right">没有正确对齐。

你能帮我得到fiddle1和标签<ul>的视觉结果吗？<li>

4

7 回答 7

2

ul默认情况下，元素将占用保证金

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

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

检查这个演示

于 2013-09-25T07:18:23.303 回答
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>
于 2013-09-25T07:26:05.367 回答
2

替换这行代码：

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

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

于 2013-09-25T09:01:15.267 回答
1

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

于 2013-09-25T07:14:51.720 回答
1

像这样放置<li>标签样式display:block;float:right;：<li style="display:block;float:right">

于 2013-09-25T07:16:58.200 回答
1

对 div 菜单按钮使用 float = right 而不是 align。

#menubuttons {
    margin-right: 0;
    margin-top: 0;
    height: 2.5em;
    line-height: 2.5em;
    display: block;
    float:right;
}
于 2013-09-25T07:19:33.773 回答
1

我已经创建了一个版本的菜单。我认为这有帮助：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
{
    // ...
}
于 2013-09-25T07:24:18.980 回答