19

初めての質問ですが、仕事の関係で 1 か月ほど前に CSS の作業を始めましたが、修正できない問題に遭遇したようです (主に私の経験不足と、それが他の誰かの CSS であることが原因です)。

コードを表示する前に、問題を説明することはあまりしません。フォームのような設定で Div のセットがありますが、テキストが混雑しすぎると次の Div に侵入するので、HTML ではなく CSS で修正しますが、これを修正する方法はありますか? まさにその問題から、それはとても簡単でばかげたものだと想像できますが、まあ、そうです。

編集：その部分について言及するのをちょっと忘れていました。それらを非表示にしたくありません。各divで、「前の」ものが重複せずに集中できるように自動的に許可するようにします（オーバーフローで試しました：自動ですが、それらを与えましたサイト全体のすべてのフォームへのスクロールバー。

これが現時点での様子の写真です。問題はすぐにわかると思います

http://imgur.com/aj8pDaO

関連する 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;
    }
4

5 に答える 5

9

ここ。すべてのラベルに 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;
}
于 2013-07-08T20:10:16.777 に答える
2

次のコンテンツにオーバーフローした場合、overflow:hidden を使用してコンテンツを非表示にすることができます

于 2013-07-08T19:46:55.813 に答える
1

左ラベルと右ラベルの CSS ロジックは同じです。

最初にすべきことは、それらを区別することです。

<div class="form-nivel">
    <label class="leftLabel" for="cfdiCreate:organizationRfc">RFC</label>
    <label class="rightLabel" id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>
  • 追加されたクラスに注意してください

次に、css で次のようにします。

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

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

右のラベルを大きくして、左に揃えました。

また、次を追加する必要があります。

<meta charset="utf-8">

htmlの頭に。これは、アクセント付きの文字を表示できるようにするためです。

于 2013-07-08T19:53:41.680 に答える
0

追加してみてください:

<div class="clearfix"></div>

各行の間。

<div class="form-nivel">
    <label for="cfdiCreate:organizationRfc">RFC</label>
    <label        id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>
<div class="clearfix"></div>
<div class="form-nivel">
    <label for="cfdiCreate:organizationTaxSystem">Regimen    fiscal</label>
    <label id="cfdiCreate:organizationTaxSystem">Sueldos y salarios</label>
</div>
于 2013-07-08T20:08:02.843 に答える