-4

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

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

1 回答 1

2

<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添加的。

于 2012-07-19T01:21:37.547 回答