文章/答案/技术大牛

发布

社区首页 >问答首页 >正确地调整html元素的顺序？

问正确地调整html元素的顺序？
EN

Stack Overflow用户

提问于 2014-02-21 11:24:02

回答 4查看 58关注 0票数 0

我有下面的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>

没有按顺序显示所有值。我怎样才能正确地把所有的价值排序？

谢谢!

jquery

html

css

javascript

回答 4

Stack Overflow用户

回答已采纳

发布于 2014-02-21 11:31:29

工作演示在这里小提琴手

下面是您必须更改的Css

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

票数 0

Stack Overflow用户

发布于 2014-02-21 11:32:39

您正在将填充应用于内联元素，这样它就不会复制您的更改，首先必须使其为display:inline-block，然后根据结构指定宽度。

Fiddle: http://jsfiddle.net/HarishBoke/8HgHe/

票数 1

Stack Overflow用户

发布于 2014-02-21 11:28:54

用一张简单的桌子怎么样？

<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>

小提琴

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21933083

复制

相似问题

问正确地调整html元素的顺序？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问正确地调整html元素的顺序？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问正确地调整html元素的顺序？
EN