1

div の幅に問題があります。div の幅をコンテンツの幅と等しくしたいのです。

私が抱えている問題は、ブラウザーのサイズを 1024 の幅に縮小すると、コンテンツが浮き上がらなくなることです。これは正しいですが、その周りの div をコンテンツと同じ幅にする必要があります。

これをテストするために使用するコードは次のとおりです。

前もって感謝します！！！

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Content with Menu</title>
    <style type="text/css">
        .box {
            border: 1px solid #AAA;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 20px;
            display: -moz-inline-stack;
            display: inline-block;
            vertical-align: top;
            zoom: 1;
            *display: inline;
        }

        div.box ol li label {
            font-size: 12px;
            position: relative;        
            float: left;
            width: 11em;
            margin-right: 1em;
            padding-top: 0.5em;
        }

        input {
            border:1px solid #CCC;
            font: 12px Arial,Helvetica,sans-serif;  
            width: 160px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box">
            <ol>
                <li>
                    <label>
                    TEST 1.1
                    </label>
                    <input type="text" disabled="disabled" />
                    <input type="text"/>
                    <span></span>
                    <span></span>
                </li>
                <li>
                    <label>
                        TEST 1.2
                    </label>
                    <input/>
                </li>
                <li>
                    <label>
                        TEST 1.3
                    </label>
                    <input/>
                </li>
            </ol>
        </div>

        <div class="box">
            <ol>
                <li>
                    <label>
                    TEST 2.1
                    </label>
                    <input type="text" disabled="disabled" />
                    <input type="text"/>
                    <span></span>
                    <span></span>
                </li>
                <li>
                    <label>
                        TEST 2.2
                    </label>
                    <input/>
                </li>
                <li>
                    <label>
                        TEST 2.3
                    </label>
                    <input/>
                </li>
            </ol>
        </div>
    </div>
</body>

4

3 に答える 3

1

ウィンドウが小さいサイズにリサイズされたときのコンテンツの配置ミスなどを防ぐには、 を使用しますmin-width。このようにして、コンテンツを拡張できますが、コンテンツが「圧迫」されないように最小幅を設定します...

于 2013-02-04T15:01:17.530 に答える
1

@lvozorが言ったことに同意し、

あなたのマークアップは次のようになります：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Content with Menu</title>
    <style type="text/css">
        .box {
            border: 1px solid #AAA;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 20px;
            display: -moz-inline-stack;
            display: inline-block;
            vertical-align: top;
            zoom: 1;
            *display: inline;
        }

    div.box ol li label {
        font-size: 12px;
        position: relative;        
        float: left;
        width: 11em;
        margin-right: 1em;
        padding-top: 0.5em;
    }

    input {
        border:1px solid #CCC;
        font: 12px Arial,Helvetica,sans-serif;  
        width: 160px;
    }
</style>
</head>
<body>
<div class="box" style="min-width:1024px;">
    <div class="box">
        <ol>
            <li>
                <label>
                TEST 1.1
                </label>
                <input type="text" disabled="disabled" />
                <input type="text"/>
                <span></span>
                <span></span>
            </li>
            <li>
                <label>
                    TEST 1.2
                </label>
                <input/>
            </li>
            <li>
                <label>
                    TEST 1.3
                </label>
                <input/>
            </li>
        </ol>
    </div>

    <div class="box">
        <ol>
            <li>
                <label>
                TEST 2.1
                </label>
                <input type="text" disabled="disabled" />
                <input type="text"/>
                <span></span>
                <span></span>
            </li>
            <li>
                <label>
                    TEST 2.2
                </label>
                <input/>
            </li>
            <li>
                <label>
                    TEST 2.3
                </label>
                <input/>
            </li>
        </ol>
    </div>
</div>
</body>
于 2013-02-04T15:41:29.200 に答える