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: hidden到a元素的 CSS：

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

JS 小提琴演示。

当然，您也可以max-width在span:

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 回答