Question

我有一点问题，我似乎无法自己弄明白。

我怎么能有一个100％宽度的容器div，其字段集和输入框对齐右边，似乎我的当前结果是groupbox覆盖了我想要的div宽度，因此在图片中将其拉伸100％： enter image description here

这是我想要的结果： enter image description here

<!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>

Answer 1

有多种解决方案。主要问题是内部div为display: block并创建了整个块（即使使用width: auto也占据整个宽度。一种可能性是将其更改为display: inline-block。您也可以使用外部div上的text-align: right让它像你想要的那样在右侧。

http://jsfiddle.net/At63D/

您也可以float: right内部div，但您必须将clearfix应用于外部div。

Answer 2

您只需将宽度元素应用于字段集元素并将其浮动到右侧。

<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>

DEMO使用您的代码。

带有与右侧对齐的字段集

2 个答案: