我在对齐CSS中的文本框时遇到问题

Question

即时通讯在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: http://84.80.135.87/scoreboard%20th%20ctf/

我真的不明白为什么这行不通，只是忽略了利润。 我已经在Firefox和Chrome浏览器中对此进行了测试，

Answer 1

您的问题是图像输入字段的垂直对齐。 它以与图像相同的方式相对于行中的其他内联元素（在本例中为您的文本输入字段）对齐-图像的底部与文本的基线对齐。 要解决此问题，请按如下所示更改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;
}

Answer 2

用这个

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

我在对齐CSS中的文本框时遇到问题

问题描述

2 个解决方案

解决方案1
4 2013-01-28 07:21:47

解决方案2
1 2013-01-28 07:24:34

我在对齐CSS中的文本框时遇到问题

问题描述

2 个解决方案

解决方案1 4 2013-01-28 07:21:47

解决方案2 1 2013-01-28 07:24:34

解决方案1
4 2013-01-28 07:21:47

解决方案2
1 2013-01-28 07:24:34