初学者的东西：如何阻止CSS的重叠？

第一个问题是,一个月前我开始工作,因为我有一份工作,但似乎遇到了一些我无法解决的问题(主要是因为我的缺乏经验,而且是别人的CSS)

在展示代码之前,我不会在布什这么多的地方,并解释问题.在一个形式的设置中有一组Div,但是当文本太拥挤时,它会侵入下一个Div,所以通过CSS修复它,而不是HTML,任何修复？从这个问题我可以想象,这很容易,这很愚蠢,但是好的.

编辑：我有点忘了提到那部分,我不希望他们被隐藏,我希望每个div自动允许“先前的”一个完成它没有重叠的集中(尝试溢出：自动,但它给了他们滚动条,到整个网站的所有形式.

这是一个现在的照片,我相信你马上会看到这个问题

这是相关的HTML

<html>
<head>
    <link href="hue.css" rel="stylesheet">
</head>
<body>
    <div class="content">

        <div class="column">
            <div class="form">
                <div class="form-nivel">
                    <label for="cfdiCreate:organizationRfc">RFC</label><label id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
                </div>
                <div class="form-nivel">
                    <label for="cfdiCreate:organizationTaxSystem">Regimen    fiscal</label><label id="cfdiCreate:organizationTaxSystem">Sueldos y salarios</label>
                </div>
                <div class="form-nivel">
                    <label for="cfdiCreate:organizationTaxAddress">Domicilio  fiscal</label><label id="cfdiCreate:organizationTaxAddress">XXXXXX Colonia Tecnológico  Monterrey,Nuevo León,México.C.P.XXXXXX</label>
                </div>
                <div class="form-nivel">
                    <label for="cfdiCreate:organizationExpeditionPlace">Lugar de  expedición</label><label id="cfdiCreate:organizationExpeditionPlace">Suc.1 Chiapas,México.     </label>
                </div>
            </div>
        </div>
        <div class="column secondary">
            <!--?xml version="1.0" encoding="UTF-8"?-->
        </div>
</body>
</html>

这里是CSS

body {
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    text-align: center;
}

p {
    text-align: left;
}

.content {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    float: left;
    background: #;
    text-align: left;
}

    .content label,.content p {
        font-size: 16px;
        color: #024DA1;
        padding-left: 2%;
    }

.column {
    display: block;
    float: left;
    width: 48%;
    margin-top: 15px;
    height: auto;
    background:;
}

.secondary {
    margin-left: 10px;
}

.clearfix {
    clear: both;
    margin-bottom: 10px;
}

.form {
    display: block;
    width: 96%;
    height: auto;
    background:;
}

.form-nivel {
    display: block;
    width: 100%;
    width: 470px;
    min-height: 20px;
    margin-bottom: 20px;
    position: relative;
}

    .form-nivel label {
        width: 160px;
        float: left;
        height: 20px;
        line-height: 20px;
        margin-right: 10px;
        text-align: right;
    }

解决方法

这里.您正在将CSS规则应用于所有标签.重叠发生是因为这个规则.

float: left;

要解决此问题,请删除.form-nivel标签规则并添加这些规则.

.form-nivel label:nth-child(1) {
    width: 160px;
    float: left;
    height: 20px;
    line-height: 20px;
    margin-right: 10px;
    text-align: right;
}

.form-nivel label:nth-child(2) {
    width: 160px;
    height: 20px;
    line-height: 20px;
    margin-right: 10px;
    text-align: right;
}

初学者的东西：如何阻止CSS的重叠？

解决方法

相关文章