-4

テキストボックスと検索ボックスの2つのオブジェクトを同じ行に並べようとしていますが、何らかの理由で並べられていません。いくつかのチュートリアルを試しましたが、それでもうまくいきません。私の知る限り、何かが足りません。どんな助けでも大歓迎です。コードは次のとおりです。

<!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タイプはHTML5searchで追加されました。

于 2012-07-19T01:21:37.547 に答える