0

我正在写一个联系页面，但我有一个奇怪的问题。就在输入和文本区域我有一个十字架。当我指向十字架时，会有文字，但效果很好。我已将十字垂直居中，因此它将出现在输入/文本区域旁边的中间。我已经在一个 div 中设置了输入/文本区域和十字，并且使用输入 div 可以正常工作，但是使用高于输入 div 的 textarea div，我的问题是十字在底部而不是在中间。请看看有什么问题：http ://demo.wietsedev.nl/

<div>
    <input type="text" placeholder="Volledige naam" id="name" />
    <img src="cross.png" class="cross" />
</div>
<div>
    <input type="text" placeholder="Uw E-mail adres" id="email" />
    <img src="cross.png" class="cross" title="Dit E-mail adres bestaat niet" />
</div>
<div height="100px">
    <textarea placeholder="Uw bericht" id="message"></textarea>
    <img src="cross.png" class="cross" />
</div>

这是十字架的样式：

.cross {
    height: 20px;
    width: 20px;
    vertical-align: middle;
    margin: 2px;
}

如果您需要更多信息，可以查看页面源。

4

3 回答 3

1

您实际上可以在这里做很多事情，但也许最简单的事情之一就是简单地将您的跨类浮动到右侧并添加一些上边距

.cross {
    height: 20px;
    width: 20px;
    margin: 2px;
    float: right;
    margin-top:0.6em;
}

编辑：请注意，这不会将十字放在文本区域的中间，但考虑到垂直对齐方式可能与浏览器不一致，将十字放在顶部也可能不是一个坏电话。

于 2012-06-20T15:37:59.490 回答
1

您很可能错误地使用了垂直对齐，因为它经常被误用的 css 样式

http://phrogz.net/css/vertical-align/index.html

于 2012-06-20T15:33:52.280 回答
1

我会从 html 中删除 img 并通过 CSS 放置它（实际上是展示性的）。把一个类放到第三个 div 然后这个样式：

.theDivClass {
padding-right: 40px; /*the img width + a little more */
background: url(pathtotheimg) no-repeat center right; /*Center right does the trick here*/
}

我认为这是最简单的方法。

于 2012-06-20T15:47:20.067 回答