[英]html / css problem
i'm trying to achieve the following (for building a form):我正在尝试实现以下目标(用于构建表单):
Name: [ ] *
my markup is:我的标记是:
<label>Name:</label>
<input type=text name=name>
<span class=validate></span>
my css is:我的 css 是:
label
{
display:block;
width:50px;
float:left;
}
input
{
float:left;
}
span.validate
{
display:block;
background-image:url(img/required.png);
width:16px;
height:16px;
}
the problem: the validate-span is positioned to the very left border instead of right to the textbox.问题: validate-span 位于最左边的边框,而不是文本框的右边。 what is wrong?怎么了?
thanks谢谢
You are using display: block
on your span, so it will automatically go to a new line.您在跨度上使用display: block
,因此它会自动 go 到新行。 You can change it to inline-block
or float it as well.您也可以将其更改为inline-block
或浮动它。
You need to also add float: left
to your span.validate
.您还需要将float: left
添加到您的span.validate
。
See: http://jsfiddle.net/8jDjq/见: http://jsfiddle.net/8jDjq/
But, that won't look right if you add another set of the elements underneath: http://jsfiddle.net/8jDjq/2/但是,如果你在下面添加另一组元素,那看起来就不对了: http://jsfiddle.net/8jDjq/2/
To fix that, you need to add clear: both
to label
: http://jsfiddle.net/8jDjq/3/要解决此问题,您需要将clear: both
添加到label
: http://jsfiddle.net/8jDjq/3/
You need to float:left
the validate span (or reconsider those display:block
s, but I guess they're there for a good reason).您需要float:left
验证跨度(或重新考虑那些display:block
,但我想它们在那里是有充分理由的)。
Give the span a float:left too.也给跨度一个 float:left 。
span.validate
{
display:block;
background-image:url(img/required.png);
width:16px;
height:16px;
float:left;
}
U need float:left;你需要浮动:左; for your span为你的跨度
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.