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