0

可点击 h2 中的元素

介绍

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

菜单必须为 100% 宽度,在灰色矩形内,并且必须在左侧有一些文本,在右侧有一些文本。整个菜单必须是可点击的,只有一个超链接。这是到目前为止所尝试的:


实施的例子

查看它们所有工作的链接在这里(免责声明:是的,这是我自己的网页)。如果你不想点击那里,这里有一张图片,它们的外观与选项的顺序相同:

显示 3 个当前备选方案


选项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 表中。

4

2 回答 2

2

我建议更好的方法是将您的 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 小提琴演示

不过,其有效性取决于您希望最终放置在h2标签中以保持可点击的元素。在 HTML5 下,在标签内嵌套块级元素是有效的a,但在 HTML4 下,虽然它似乎仍然有效,但根据文档类型,它被认为是无效的

但是,对于发布的要求,这似乎可行;尽管它确实需要重组您的 HTML,这可能是不可能的。然而:

  • 有效的 HTML,
  • 它是抗破坏的(除非内容span超过给定的宽度,
  • 它不依赖于任意px调整(尽管它确实用于padding将调整后的文本垂直居中a),
  • 它不需要 JavaScript

编辑以稍微修改 CSS,以解决右浮动文本变得足够大以溢出到下一行的可能性,只需添加overflow: hiddena元素的 CSS:

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

JS 小提琴演示

当然,您也可以max-widthspan:

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

JS 小提琴演示

于 2012-06-02T12:41:05.250 回答
0

我同意大卫托马斯的加价。虽然我会稍微改变 css 以使其更健壮。如果您调整浏览器的大小以使右侧跨度被推到左侧文本下方(使浏览器更小),那么您会看到我应用的清除属性意味着 a 保持围绕跨度而不是允许跨度移出a区。

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/

于 2012-06-02T12:50:58.800 回答