0

我有以下内容：

    <a href="http://www.youtube.com/"  title="Tonight">
    <img src="images/video.jpg" alt="Tonight Icon" />Hotel </a>

这显示了可单击的图像以及下方的文本 - Hotel，它也是可单击的。

如何在 jpg 和文本（Hotel）周围设置边框，以便它们都在边框内。

我试过：

    <div border="1px">
    <a href="http://www.youtube.com/"  title="Tonight">
    <img src="images/video.jpg" alt="Tonight Icon" border="1" />Hotel </a></div>

但这并没有在 jpeg 和文本周围设置边框。

4

4 回答 4

1

您可以使用 CSS 在元素级别（内联）设置样式：

<div style="border: 1px solid #000000;">
<a href="http://www.youtube.com/"  title="Tonight">
<img src="images/video.jpg" alt="Tonight Icon" />Hotel </a></div>

这使用了边框属性的简写符号，您可以在此处阅读。

更新

W3 详述的视觉格式化模型有一个自然的流程（已过时，但原则仍然存在），它指出内联元素应包含在块元素内，因此格式化（在这种情况下为边框）应该发生在块中等级。此示例中的链接/图像/文本应位于元素中，因此样式应在级别进行。您当然可以在 a中包含，但随后样式将出现在块元素中。<p><div><img><p>

于 2012-09-20T15:13:22.643 回答
0

为您的链接添加样式。

<a href="http://www.youtube.com/"  title="Tonight" style="border:1px solid #000000; display:inline-block;">
    <img src="images/video.jpg" alt="Tonight Icon" border="1" />
    Hotel 
</a>

编辑：添加 display:inline-block 以实现跨浏览器兼容性。

于 2012-09-20T15:12:30.653 回答
0

这是使用 CSS 执行此操作的正确方法：

在您的样式表中，创建一个类：

<style>
    .withBorder {
        board:1px solid #000000;
    }
</style>

在包装 DIV 中使用该类：

<div class="withBorder">
    <a href="http://www.youtube.com/"  title="Tonight">
    <img src="images/video.jpg" alt="Tonight Icon" border="1" />Hotel </a>
</div>

将 HTML 与样式分开是一种很好的做法。使用内联样式标签会起作用，但如果您有另一个框并为其设置样式，然后决定要更改外观，您可以编辑 CSS 类，而不必单独编辑每个 HTML 内联样式。

于 2012-09-20T15:14:38.160 回答
0 
<div style="border:2px">
    <a href="http://www.youtube.com/"  title="Tonight">
    <img src="images/video.jpg" alt="Tonight Icon" border="1" />Hotel </a>
</div>
于 2012-09-20T15:15:36.203 回答