Question

我想在一个框中添加图片和按钮。

我希望顶部的图像和图像下面的按钮。我希望它们都在一个坚固的边界内。

Answer 1

这样的事情可能会让你开始：

＆＃13;

<div id="myBox" style="width:200px;padding:10px;text-align:center;border:2px solid purple;">
    <img src="http://placekitten.com/100/150" /><br>
    <button>Click Me</button>
</div>

＆＃13;

请注意，我们通常将样式（style=）与HTML分开：

<style>
    #myBox {width:200px;padding:10px;text-align:center;border:2px solid purple;}
</style>
<div id="myBox">
    <img src="http://placekitten.com/100/150" /><br>
    <button>Click Me</button>
</div>

Answer 2

您可以使用以下代码段来获得所需的效果（注意：这只是一个示例，用于说明如何使用HTML和CSS在下面添加图片和文字，点击按钮，它不会重定向或执行任何操作）：

<强> HTML：

<button class="btn btn-primary tweetButton">
    <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png" width="20" height="20" />
    <p>Tweet</p>
</button>

<强> CSS：

.tweetButton {
  width: 90px;
}

.tweetButton p {
  margin: 0 0 2px;
}

查看演示here。

如何在一个边框或框中添加图像和按钮？

2 个答案: