Question

我的风格有问题。我有以下html结构，我无法更改它，我只允许更改样式（css代码）而不是文档的结构。我需要输入来覆盖红色div的100％宽度，但由于它包含在一个跨度中，我不能很好地适应它。

<div style="width: 100%;">
    <div style="background-color: red; width: 100%;">
        <span>&nbsp;</span>
        <label>App name</label>
        <span class="value">
            <input style = "width:100%"/>
        </span>
        <span class="required-icon">*</span>
    </div>
</div>

那么，你能帮我设计样式吗？这里the fiddle。非常感谢！

Answer 1

您必须添加padding:0，可以border:0或width: calc(100% - 3px);。

示例here。

Answer 2

窃取输入的边框或填充是作弊，可能不是你想要达到的目的。

相反，请将box-sizing: border-box;添加到input：

（更新小提琴）：

input{
    background:yellow;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

默认情况下，width: 100%指的是输入的内容，即没有填充。要将宽度引用到实际边界（我们大多数人可能期望的那样），请使用上面提到的css属性。

用跨度覆盖100％的div宽度

2 个答案: