0

css / htmlのいくつかのテキストボックスを並べるのに問題があります私の現在のコード：

<html>
<head>
    <title>CTF Scoreboard</title>
    <link href="css.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <div class="header">
        <img class="headerimg" src="img/header.png" />
        <form action="search.php" method="get" class="search">
            <input type="text" placeholder="Search players" required          class="box" name="user" />
            <input name="submit" type="image" src="img/blank.png" class="submit" />
        </form>
    </div>
</body>


body{
margin: 0px;
}
.header{
width: 100%;
height: 100px;
margin: 0px;
background-image:url('img/headerbg.png');
background-repeat: repeat-x;
margin-left: 0px;
margin-top: 0px;
padding: 0px;
border: 0px;
}

.headerimg{
height: 90px;
margin-left: 0px;
margin-top: 0px;
}

.header .search{
padding:0px;
background-image: url('img/searchbox.png');
background-repeat: no-repeat;
width: 310px;
height: 40px;
position:absolute;
top:27px;
right:27px;
margin-bottom: 0px;
}

.header .search .box{
border: 0px;
padding: 0px;
background-color:transparent;
margin-left: 5px;
width: 260px;
height: 37px;
}

.header .search .submit{
border: 0px;
background-color:transparent;
margin-left: 3px;
margin-top: 3px;

width: 36px;
height: 36px;
}

現在の様子：http://84.80.135.87/scoreboard%20th%20ctf/

なぜこれが機能しないのか本当にわかりません。マージンを無視しているだけです。FirefoxとChromeでこれをテストしましたが、どちらでも機能しません

4

2 に答える 2

4

問題は、画像入力フィールドの垂直方向の配置です。これは、画像と同じように、行内の他のインライン要素（この場合はテキスト入力フィールド）に対して位置合わせされます。画像の下部は、テキストのベースラインと位置合わせされます。これを修正するには、CSSを次のように変更します。

.header .search .submit{
border: 0px;
background-color:transparent;
margin-left: 3px;
margin-top: 3px;
vertical-align: top; /* Modify the vertical alignment. */    
width: 36px;
height: 36px;
}
于 2013-01-28T07:21:47.217 に答える
1

これを使って

.header .search .box 
{
    background-color: transparent;
    border: 0 none;
    height: 37px;
    margin-left: 5px;
    margin-top: -1px;
    padding: 0;
    width: 260px;
    display:block;
}
于 2013-01-28T07:24:34.587 に答える