0

我想在 div 顶部添加按钮（如大多数网站的主菜单）。昨天我为每个按钮使用不同的 div 标签创建了按钮，并添加了很多边距，但最终结果在 Internet Explorer 上效果不佳，所以我决定使用不同的方法。DL 标签也不能很好地工作，现在我尝试了 span 标签，但仍然无法将它们放置在我想要的位置。边距没有响应，我不知道该怎么办。PS：标题 div 左侧也有两个图像，我希望按钮位于右侧。

4

2 回答 2

0

对于格式化/样式，标签是无关紧要的——它真的取决于你想在外观/感觉方面对它们做什么，因为大多数常用标签（div、span、li 等）都有不同的“默认”属性。

使用 CSS，您可以使这些元素中的任何一个看起来像您想要的那样 - 从纯粹的风格角度来看，它们都是可接受的选项。不幸的是，在 Internet Explorer 中查看时，您的样式通常会存在差异——这是许多前端开发人员存在的祸根——但您可以通过对问题的一些调查和使用条件样式来解决 Internet Explorer 问题。

关于这些主题的几个起点：

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/

从语义的角度来看，在 html5 标记中，通常建议使用nav标记构建主菜单，以指示您正在构建顶级站点导航结构。一般来说，nav标签包装一个ul，后者又包装一系列li。

<nav id="main-menu">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/pageX">Page X</a></li>
        ...
    </ul>
</nav>

更多信息可在此处获得：http: //html5doctor.com/nav-element/

于 2013-05-19T17:20:13.063 回答
0

创建外包装

<div class="menu-wrapper">
</div>

如上所述，使用 ul 和 li 作为您的菜单。这是一种几乎或至少是最常用的标准。在上面的包装器中，使用以下无序列表和您的相关链接。

<ul class="menu">
    <li><a>Home</a></li>
    <li><a>Contact</a></li>
    <li><a>About</a></li>
</ul>

对于样式，并且由于您的标题中有图像（您可以将它们包装在一个 div 中并浮动它们，或者为使用一些脚手架网格（例如 Twitter Bootstrap）+1），您需要浮动菜单包装器。你也可以只是漂浮在 ul 上，但我特别喜欢这样做。

div.menu-wrapper { float: right; }
ul.menu li { display:-moz-inline-stack; display:inline-block;zoom:1;*display:inline;}
ul.menu li a { display:block; padding: 6px 12px; }
ul.menu li a:hover { /* some nice hover style here */}

以上应该让你朝着正确的方向前进。在上面的 li 样式是使用跨浏览器内联块。如果你愿意，你也可以让它漂浮。

顺便说一句，我的 CSS 样式相当冗长，有些人不喜欢这样，所以请随意命名每个元素和相应的样式。这就是我在编辑器中更喜欢它的方式，因为它会自动缩进等。

于 2013-05-19T17:14:58.133 回答