创建包含不同元素的可单击标记

Question

可点击的h2

中的元素

简介

我在html中创建一个单行菜单。我有3个选项以非常相似的方式工作。问题是具有html权限的那个，看起来更容易失败。我把这3个例子放在这里。我正在寻找可靠的，与浏览器兼容的菜单。第三个选项使用javascript，所以我真的不喜欢它。

菜单必须是100％宽度，在灰色矩形内，左边有一些文字，右边有一些文字。只需一个超链接即可点击整个菜单。到目前为止，这是what I have tried：

已实施的例子

查看它们全部工作的链接是here（免责声明：是的，这是我自己的网页）。如果你不想点击那里，这里的图片显示它们与选项的顺序相同：

选项1。

这个没有符合html标准，但我发现它更符合逻辑，一般表现更好，并且不太可能带来许多麻烦：

<a href="http://newfutureuniversity.org/test/hblock.php">
  <h2 style="width:100%; height:100%; border: 1px solid #AAA; padding: 0px 0px 0px 5px; background-color: #EEE;">
    Hello world
    <span style="margin: 6px; color:gray; font-size: 15px; float:right; ">
      Right text
    </span>
  </h2>
</a>

选项2。

这个是符合html的，但我只是讨厌使用像素来中心。我觉得它很容易打破。此外，右边的文字不是完全可点击的：

<h2 style="border: 1px solid #AAA; padding: 0px 0px 0px 5px; background-color: #EEE;">
  <a href="http://newfutureuniversity.org/test/hblock.php" style="width:100%; height:100%; display:block;">
    Hello world
  </a>
  <span style="position: relative; right: 6px; top:-23px; color:gray; font-size: 15px; float:right; ">
    Right text
  </span>
</h2>

选项3。

这个使用javascript。我不喜欢用javascript这样的菜单膨胀，并且使用html / css是可用的，但这是另一种选择。它没有得到常规链接的颜色。

<h2 onclick="location.href='http://newfutureuniversity.org/test/hblock.php';" style="cursor:pointer; display: block; width:100%; height:100%; border: 1px solid #AAA; padding: 0px 0px 0px 5px; background-color: #EEE;">
  Hello world
  <span style="margin: 6px; color:gray; font-size: 15px; float:right; ">
    Right text
  </span>
</h2>

问题

哪一个更兼容浏览器，不太可能破解？您还有其他建议或改进吗？任何反馈都将不胜感激

PS，所有内联CSS都将被拆分为不同的CSS表。

Answer 1

我建议更好的方法是将HTML重组为以下内容：

<h2>
    <a href="http://newfutureuniversity.org/test/hblock.php">Hello world<span>Right text</span></a>
</h2>​

然后使用以下CSS：

a {
    display: block;
    padding: 0.2em;
    width: 80%;
    margin: 0 auto;
    border: 1px solid #000;
    background-color: #aaa;
}

a span {
    color: #000;
    float: right;
    text-decoration: none;
    font-size: 0.8em;
    padding-top: 0.2em;
}​

JS Fiddle demo

这有效性取决于您希望最终放置在h2标记内的元素，以保持可点击状态。在HTML5下，将块级元素嵌套在HTML4下的a标记内是有效的，但根据doctype，它仍然可以正常工作， 认为无效。

但是，对于公布的要求，这似乎有效;虽然它确实需要重构您的HTML，这可能是不可能的。但是：

• 是有效的HTML，
• 它不会破坏（除非span的内容超过给定的宽度，
• 它不依赖于任意px调整（虽然它确实使用padding将调整后的文本垂直居中于a），
• 它不需要JavaScript

---

编辑稍微修改CSS，以说明右浮动文本变得足够大以溢出到下一行的可能性，只需将overflow: hidden添加到a元素的CSS：

a {
    display: block;
    padding: 0.2em;
    width: 80%;
    margin: 0 auto;
    border: 1px solid #000;
    background-color: #aaa;
    overflow: hidden;
}

JS Fiddle demo

您当然也可以向max-width添加span：

a span {
    color: #000;
    float: right;
    text-decoration: none;
    font-size: 0.8em;
    padding-top: 0.2em;
    max-width: 80%;
}​

JS Fiddle demo

Answer 2

我赞同David Thomas的标记。虽然我会略微改变css以使其更强大。如果您调整浏览器的大小以使右侧跨度被推到左侧文本下方（使浏览器变小），那么您将看到我应用的清除属性意味着围绕跨度而不是允许跨度移出一个区域。

<强> HTML：

<h2 class="item ">
    <a href="#" >Loads of left left Left Text<span>Right Text lots more</span></a>
</h2>

<强> CSS：

.item a {
    zoom:1;
    border: 1px solid #666;
    background: grey;
    display: block;
}
.item a:before,
.item a:after {
    content:"";
    display:table;
}
.item a:after {
    clear:both;
}
.item span {
    background: green;
    float: right;
}

<强>样本：

http://jsfiddle.net/Vc3DA/