Question

我是CSS的新手，希望有人能帮助我。

我有一个HTML页面，其中包含具有以下结构的HTML表单。

到目前为止一切正常但由于某种原因我无法将某些样式应用于＆＃34; main＆＃34;部分或表格，尤其是边框或背景颜色样式。

我尝试在部分和表单中添加以下内容，并使用ID和类，但没有任何效果 - 即使我添加了!important：

border: 1px solid #000;
background-color: #ccc;

我能够在上面设置的唯一内容就是保证金有效。

但是，如果我将边框或背景样式设置为内部div（例如，对于类＆＃34; frmLine＆＃34;）它可以正常工作，所以我的猜测是由于某种原因内部样式重叠应用于任何样式育儿形式和部分。

有人可以告诉我如何解决这个问题吗？ 原因可能是在育儿部分/表格与内部div之间没有边距或填充？

我的HTML：

<div class="wrapper">
    <?php require_once("includes/menu.php"); ?>
    <section id="main">
        <form id="frmRequest">
            <div class="col-12">
                <span class="frmTitle">Some title</span>
            </div>
            <div class="col-12 frmLine">
                <div class="col-3 frmCaption">Some caption</div>
                <div class="col-9">Some form field</div>
            </div>
            <div class="col-12 frmLine">
                <!-- ... -->

我的CSS（相关风格）：

html, body {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
}
.wrapper {
    height: auto;
    margin: 0 auto -140px;
    min-height: 100%;
    overflow: auto;
    padding: 0 0 140px;
}
#main {
    border: 1px solid #000; /* This is what is not working ! */
    margin-left: 8.33%;
    margin-right: 8.33%;
}
.frmCaption {
    font-weight: bold;
}
.frmField {
    display: block;
    width: 100%;
}
.frmLine {
    margin: 0;
    padding: 0;
}

更新我做了一些进一步的测试，结果显示这是由CSS引起的。然后我删除了所有样式并逐步重新添加它们，这表明问题是由我的网格样式（见下文）引起的，特别是它们上面的浮动样式。 一旦我添加这些样式，主要部分周围的边框就会消失。被移到部分之上 - 有人可以告诉我如何解决这个问题吗？

/* ... */
.col-12 {
    width: 100%;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}   
.row:after {
    clear: both;
    content: '';
    display: block;
}

非常感谢，麦克

Answer 1

不知何故，overflow（大多数，如果不是全部）block级别元素（visible）的默认值会导致溢出元素可见，但是元素本身不调整自己的大小。通过将overflow设置为hidden，元素会调整自己的大小。

#main {
    border: 1px solid #000;
    margin-left: 8.33%;
    margin-right: 8.33%;
    overflow: hidden;
}

CSS：在表单或主要内容上设置样式不起作用（但在内部）

1 个答案: