Div的字段集向右对齐
[英]Div with a fieldset aligned to the right
问题描述
I have a little bit of problem, that I can't seem to quite figure out on my own. 
我有一点问题，我似乎无法完全自行解决。
How can I have a 100% width container div that has a fieldset and input box aligned to the right, it seems that my current result is that the groupbox overrides my desired div width and thus stretches it 100% in the pic: 我怎么能有一个100％宽度的容器div，它的字段集和输入框在右边对齐，看来我当前的结果是组框覆盖了我想要的div宽度，因此在图片中将其拉伸了100％：
This is my desired result: 这是我想要的结果：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="width: 100%;">
<div style="width: auto; text-align: right;">
<fieldset style="padding: 5px; border: 1px solid rgb(128,128,128);">
<legend style="color: rgb(11,63,113); font-weight: bold; font-size: 11pt;">File Number</legend>
<input type="text" id="fileno" style="background: white url(images/glass.png) left no-repeat; padding-left: 19px;" onkeydown="handleKeyDown(event,this)">
</fieldset>
</div>
</div>
</body>
</html>
2 个解决方案
解决方案1
1 2013-11-20 13:52:31
There are a variety of solutions. 有多种解决方案。 The main issue is that the inner div is display: block and creates an entire block (takes up the entire width even with width: auto . One possibility is to change it to display: inline-block . You can also use text-align: right on the outer div to have it on the right side like you want. 主要问题是内部div是display: block并创建一个整个块（即使使用width: auto也会占用整个宽度。一种可能是将其更改为display: inline-block 。也可以使用text-align: right的外div来有它的右侧像你想要的。
http://jsfiddle.net/At63D/ http://jsfiddle.net/At63D/
You could also float: right the inner div, but you would have to apply a clearfix to the outer div. 您也可以float: right内部div float: right ，但是您必须对外部div应用clearfix。
解决方案2
0 已采纳 2013-11-20 13:54:12
You just need to apply a width element to the field set element and float it to the right. 您只需将width元素应用于字段set元素并将其浮动到右侧。
<div style="width: 100%;">
<div style="width: auto; text-align: right; border: 1px solid red; height: 75px;">
<fieldset style="padding: 5px; border: 1px solid rgb(128,128,128) width: 200px; float: right">
<legend style="color: rgb(11,63,113); font-weight: bold; font-size: 11pt;">File Number</legend>
<input type="text" id="fileno" style="background: white url(images/glass.png) left no-repeat; padding-left: 19px;" onkeydown="handleKeyDown(event,this)">
</fieldset>
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.