[英]Alignment of plain simple buttons in CSS
I 've got this simple HTML snippet (form) taken from a book: 我从一本书中得到了这个简单的HTML代码段(表单):
<form action="example.php" method="post">
<div>
<label for="name" class="title">Name:</label>
<input type="text" id="name" name="name" />
</div>
<div>
<label for="email" class="title">Email:</label>
<input type="email" id="email" name="email" />
</div>
<div>
<span class="title">Gender:</span>
<input type="radio" name="gender" id="male" value="M" />
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="F" />
<label for="female">Female</label> <br/>
</div>
<div>
<input type="submit" value="Register" id="submit" />
</div>
Then I couple it with the following CSS code: 然后,将其与以下CSS代码结合在一起:
div {
border-bottom: 2px solid #efefef;
margin: 10px;
padding-bottom: 10px;
width: 260px;
}
.title {
float: left;
width: 100px;
text-align: right;
padding-right: 10px;
}
#submit {
text-align: right;
color: red;
}
The problem is that I can't align the 'Register' button found on the bottom of the form. 问题是我无法对齐表格底部的“注册”按钮。 What am I missing here?
我在这里想念什么?
Thanks in advance. 提前致谢。
Fix: http://jsfiddle.net/FerF7/ 修正: http : //jsfiddle.net/FerF7/
What you have in your #submit class is a text-align that is aligning the text WITHIN the button itself, not aligning the button within the div. 您在#submit类中拥有的是文本对齐,它是在按钮本身内对齐文本,而不是在div中对齐按钮。
Simply add text-align: right to your div class and you will be aligning within the div like so: 只需在div类上添加text-align:就可以了,您将在div中进行对齐,如下所示:
div {
border-bottom: 2px solid #efefef;
margin: 10px;
padding-bottom: 10px;
width: 260px;
text-align:right;
}
You must align the parent container as opposed to aligning the text of the button itself. 您必须对齐父容器,而不是对齐按钮本身的文本。 Change your HTML and CSS as follows:
如下更改HTML和CSS:
.submit-button {
text-align: right;
}
<div class="submit-button">
<input type="submit" value="Register" id="submit" />
</div>
Doing a text-align on the input itself will simply align the text inside the button, which you can see if you add, eg width:100px
to the button css. 对输入本身进行文本对齐只会使按钮内的文本对齐,如果您添加了
width:100px
css,则可以看到按钮css的width:100px
,例如width:100px
。
Most likely what you want is to assign an id to the parent div and text-align:right that. 您最可能想要的是为父div分配一个ID,然后text-align:right。
#submit_div {
text-align:right;
}
<div id="submit_div">
<input type="submit" value="Register" id="submit" />
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.