1

I have a problem with the width of a div, I want to have the width of the div equaled to the width of it's content.

The problem I have is, if I resize the browser down to a width of 1024 the content doesn't float anymore, which is correct but I'd need the div around it to be as wide as it's content.

Here is the code im using to test it:

Thanks in advance!!!

<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

To prevent such things as misplacement of content when window is resized to a low size, use min-width. This way, you can expand your content, but you set a minimum width, so that your content doesn't get "squeezed"...

于 2013-02-04T15:01:17.530 回答
1

agreeing with what @lvozor said,

your markup become's like this :

<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 回答
0

With React and styled-components.

Render:

<StyledInput
      value={value}
      length={String(value).split('').filter(v => typeof +v === 'number').length}
    />

Styling (with rem):

const StyledInput = styled.input`
   width: ${p => `${p.length * 0.9}rem`}; // adjust the number accordingly
`;

Styling (with px):

const StyledInput = styled.input`
   width: ${p => `${p.length * 16}px`}; // adjust the number accordingly
`;
于 2018-10-19T12:32:16.443 回答