Question

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

我为child元素添加了一个类。像这样：

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

此元素包含在div中。 DIV的背景色设置在边缘可见。我不希望这种情况发生。

提前致谢！

Answer 1

只需将您的input设置为阻止元素，它就会起作用 - DEMO

.div input {
    display: block;
    width: 100%;
    border: 0;
}

Answer 2

请尝试以下代码：（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。

Answer 3

我认为您正在寻找的是

display: block;
width: 100%;

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

http://jsfiddle.net/pTQWM/

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

box-sizing: border-box;

如何在DIV中创建子元素占用容器的完整大小

3 个答案: