Question

我正在尝试排列两个对象，即文本框和搜索框在同一行，但由于某种原因，它没有排队。尝试了几个教程，但仍然没有去。据我所知，我错过了一些东西。任何帮助表示赞赏。这是代码：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div.transbox {
            background-color: grey;
            border: 1px solid black;
            opacity:0.6;
            filter:alpha(opacity=60); /* For IE8 and earlier */
            padding: 5%;
        }
        div.transbox pt {
            border: 1px solid #505050; /*#123360;*/
            position: relative;
            left: 0;
            font-size: 12px;
            width: 27%;
            background-color: white;
            -moz-border-radius:3px;
            -khtml-border-radius:3px;
            -webkit-border-radius:3px;
            border-radius:10px;
            font-weight: bold;
            color: black;
            padding: 5px;
        }
        div.transbox ps {
            position: absolute;
            right: 0;
            border: 1px solid #505050; /*#123360;*/
            font-size: 12px;
            width: 27%;
            background-color: white;
            -moz-border-radius:3px;
            -khtml-border-radius:3px;
            -webkit-border-radius:3px;
            border-radius:10px;
            font-weight: bold;
            color: black;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div class="transbox">
        <pt> example.com</pt>
        <ps><form>
            <input type="text" name="search" />
        </form> </ps>
    </div>
</body>
</html>

Answer 1

<pt>和<ps> 不是有效标记。

我在这里制定了符合标准的工作示例：http://jsfiddle.net/7LXQ9/。

<强>代码：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div.transbox {
            background-color: grey;
            border: 1px solid black;
            opacity:0.6;
            filter:alpha(opacity=60); /* For IE8 and earlier */
            padding: 5%;
        }
        div.transbox #site-name {
            border: 1px solid #505050; /*#123360;*/
            position: relative;
            left: 0;
            font-size: 12px;
            width: 27%;
            background-color: white;
            -moz-border-radius:3px;
            -khtml-border-radius:3px;
            -webkit-border-radius:3px;
            border-radius:10px;
            font-weight: bold;
            color: black;
            padding: 5px;
        }
        div.transbox form {
            display: inline-block;
            position: absolute;
            right: 0;
            border: 1px solid #505050; /*#123360;*/
            font-size: 12px;
            width: 27%;
            background-color: white;
            border-radius:10px;
            -moz-border-radius:3px;
            -webkit-border-radius:3px;
            font-weight: bold;
            color: black;
            padding: 5px;
        }
        div.transbox input {
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            border: none;
        }
    </style>
</head>
<body>
    <div class="transbox">
        <span id="site-name">example.com</span>
        <form>
            <input type="search" name="search" />
        </form>
    </div>
</body>

顺便说一下，input类型search添加了HTML5。

无法在同一行中排列2个对象

1 个答案: