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://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 个答案: