Javascript 创建包含不同元素的可单击标记 可点击h2中的元素 介绍

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

菜单必须是100%宽度，在一个灰色矩形内，并且必须有一些文本在左边，一些在右边。整个菜单只能通过一个超链接点击。到目前为止：

实现示例 一个链接可以看到他们都在工作（免责声明：是的，这是我自己的网页）。如果您不想单击此处，下面的图像显示了它们与选项的相同顺序：

选项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>

你好，世界
右文本

问题 您认为哪一个更兼容浏览器且不太可能出现故障？你还有其他的建议或改进吗？任何反馈都将不胜感激

---

另外，所有内联CSS都将被放在不同的CSS表中。

我建议更好的方法是重新组织HTML，如下所示：

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

但是，这一点的有效性取决于您希望最终放置在

h2

标记中以保持可点击的元素。根据doctype，在HTML5下，在

a

标记中嵌套块级元素是有效的，但是在HTML4下，虽然它看起来仍然有效，但它被认为是无效的

但是，对于发布的需求来说，这似乎是可行的；尽管它确实需要重新构造HTML，但这可能是不可能的。然而：

• 它是有效的HTML
• 它能抵抗断裂（除非

  span

  的内容超过给定的宽度
• 它不依赖于任意的

  px

  调整（尽管它使用

  填充

  在

  a

  中垂直居中调整大小的文本）
• 它不需要JavaScript

---

编辑稍微修改CSS，考虑右浮动文本可能变得足够大而溢出到下一行，只需将

溢出：隐藏

添加到

元素的CSS：

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


当然，您也可以在
span
中添加
max width
：

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

.
我同意David Thomas的观点。虽然我会稍微修改css以使其更健壮。如果调整浏览器的大小，使右侧的跨距推到左侧文本的下方（使浏览器更小），然后您将看到，我应用的清除属性意味着a保持围绕跨度的状态，而不是允许跨度移动到区域之外

HTML:

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

.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;
}

演示：

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

.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;
}

请将演示发布到演示站点，这样问题在将来仍然有用，并且在您更正/修复代码后不会被…弃用。此外，这个问题似乎是在征求意见，而不是具体/可能客观地更正“答案”。您遇到了什么问题，您为什么认为正确的HTML方法更有可能被破坏？在什么情况下？我不认为使用演示网站有多大意义，因为我的页面处于真正早期的开发阶段，所以我不打算推广它，但其他人可能会这样想。我将在演示网站中添加未来的代码。我不完全喜欢这三种选择中的任何一种，所以不要说“我该怎么做？”这样做？’不放任何东西，我认为发布我的方法更好。我目前没有任何问题，但我想防止出现任何问题。就像我使用mysql注入一样。因为它被调整为像素，而页面的其余部分被调整为%。文本本身以负边距定位…选项2。是更好的方法我认为r浏览器的兼容性非常好。这正是我想要的。不过我对HTML5一无所知，谢谢你们。