Question

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

Answer 1

创建外包装

<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相当冗长，有些人不喜欢这样，所以请随意命名每个元素和样式。这就是我在编辑器中喜欢它的方式，因为它自动缩进等。

Answer 2

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

使用CSS，您可以根据需要制作任何这些元素 - 从纯粹的风格角度来看，它们都是可接受的选项。不幸的是，在互联网浏览器中查看时，您的风格经常会出现差异 - 这是许多前端开发人员存在的祸根 - 但您可以通过对问题的调查来解决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/

为了在标题div上创建可点击的按钮，我应该使用哪些标签？

2 个答案: