1

我有一个输入元素，我希望它占据父 DIV 的完整大小。我如何实现这一目标？我试过width 100%了，但它不起作用。我面临的问题是父母有蓝色背景，孩子有黄色背景。结果，我可以在边缘看到一些蓝色轮廓。我该如何摆脱它。

我为子元素添加了一个类。像这样的东西：

.input-editable { background-color: some-color; width: 100%; }

这个元素被包裹在一个 div 中。该 DIV 具有在边缘可见的背景颜色集。我不希望这种情况发生。

提前致谢！

4

3 回答 3

1

只需制作input一个块元素，它就会起作用 -演示

.div input {
    display: block;
    width: 100%;
    border: 0;
}
于 2012-10-17T19:54:52.497 回答
0

试试下面的代码：（http://jsfiddle.net/MUDey/）

<!doctype html>
<html>
<head>
    <style>
        *{padding:0;margin:0;}
        #parent { width: 75%; height: auto; background-color: Blue; }
        .input-editable {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div id="parent">
        <input type="text" class="input-editable" value="Show us your HTML" />

    </div>
</body>
</html>

请发布您的 HTML。

于 2012-10-17T19:55:43.450 回答
0

我想你要找的是

display: block;
width: 100%;

这将使您的输入元素跨越父元素的整个宽度。

http://jsfiddle.net/pTQWM/

请注意，如果您在输入元素上有填充，则最好也使用它：

box-sizing: border-box;
于 2012-10-17T20:04:12.837 回答