Question

我在html页面下方：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Extended UI</title>
<style type="text/css">

.header{
    padding-right:50px; 
}
.value{
    padding-left:50px; 
}

</style>
</head>

<body>
    <div id="wrapper">
    <div id="score"><span class="header">Score:</span><span class="value">10</span></div>
    <div id="dd-1"><span class="header">Has Account</span><span class="value"><select name="" id="">
                <option value="">Yes</option>
                <option value="">No</option>
            </select></span></div>
    <div id="dd-2"><span class="header">Has House</span><span class="value"><select name="" id="">
                <option value="">Yes</option>
                <option value="">No</option>
            </select></span></div>
    <div id="dd-3"><span class="header">Has Phone</span><span class="value"><select name="" id="">
                <option value="">Yes</option>
                <option value="">No</option>
            </select></span></div>
</div>

</body>

</html>

所有值都不会按顺序显示。如何正确地命令所有值？

谢谢！

Answer 1

您正在对内联元素应用填充，因此它不会首先复制您的更改，您必须将其更改为display:inline-block，然后指定每个结构的宽度

小提琴： http://jsfiddle.net/HarishBoke/8HgHe/

Answer 2

如何使用简单的表？

<table>
    <tr>
        <td>Score:</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Has Account:</td>
        <td>
            <select name="" id="">
                <option value="">Yes</option>
                <option value="">No</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Has House:</td>
        <td>
            <select name="" id="">
                <option value="">Yes</option>
                <option value="">No</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Has Phone:</td>
        <td>
            <select name="" id="">
                <option value="">Yes</option>
                <option value="">No</option>
            </select>
        </td>
    </tr>
</table>

<强> FIDDLE

Answer 3

您无法为内联元素设置，但内联块将适合您。

.header {
    display: inline-block;
    width: 150px;
}

Answer 4

工作演示在这里 Jsfiddle

以下是您必须进行的Css更改

.header{
    padding-right: 50px;
    min-width: 120px;
    display: inline-block;
}
.value{
    padding-left:50px; 
    display: inline-block;
}

正确地引入html元素顺序？

4 个答案: