Question

我有<input type="text"> padding:0和border:0，与其旁边的<span>元素相同。但是为什么文本字段看起来比span元素高？

以下是代码：

*{
	margin: 0px;
	padding: 0px;
}

body{
	background-color: rgb(226, 220, 220);
}

nav{
	width: 100%;
	background-color: #12161C;
}

nav > .nav_ul{
	width: 1000px;
	margin: 0px auto;
	font-size: 0px;
}

nav > .nav_ul > .nav_li{
	display: inline-block;
	margin: 20px 0px;
	font-size: 16px;
	margin-right: 20px;
}

nav > .nav_ul > .nav_li_last_child{
	margin-right: 0px;
}

nav > .nav_ul > .nav_li > .nav_a{
	text-decoration: none;
	background-color: #E56E04;
	display: block;
	color: white;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

nav > .nav_ul > .nav_li > .nav_a:hover{
	background-color: #F19645;
	border-color: #F19645;
}

nav > .nav_ul > .nav_search{
	position: relative;
	display: inline-block;
}

nav > .nav_ul > .nav_search > .nav_searchfield{
	margin: 20px 0px;
    width: 300px;
    font-size: 16px;
    display: inline-block;
    background-color: #545455;
    color: white;

    border: none;

    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	border-bottom-right-radius: 0px;
	border-top-right-radius: 0px;
}

nav > .nav_ul > .nav_search > .fa-search{
	font-size: 16px;
	display: inline-block;
	background-color: #545455;
	color: black;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	border-bottom-left-radius: 0px;
	border-top-left-radius: 0px;
}

.fa-user, .fa-user-plus{
	margin-right: 10px;
}

/* ------------------ */

.float_right{
	float: right;
}

.float_left{
	float: left;
}

.clear_both{
	clear: both;
}

<!DOCTYPE>
<html>
	<head>
		<link href="backbone/general.css" rel="stylesheet" type="text/css"/>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
	</head>

	<body>
		<nav>
			<ul class="nav_ul">
				<div class="nav_search">
					<input class="nav_searchfield" type="text" placeholder="Search ..." />
					<span class="fa fa-search"></span>
				</div>
				<li class="nav_li float_right nav_li_last_child"><a href="#" class="nav_a"><i class="fa fa-user"></i>Login</a></li>
				<li class="nav_li float_right"><a href="#" class="nav_a"><i class="fa fa-user-plus"></i>Register</a></li>

				<div class="clear_both"></div>
			</ul>
		</nav>
	</body>
</html>

为什么span字段小于inputfield？我怎么解决这个问题？

Answer 1

是的@Jackson关于输入字段是否正确可能因浏览器而异，但如果您不想担心这两个元素的高度，可以试试这个技巧：

事情是在输入中设置图标，你必须这样做：

nav > .nav_ul > .nav_search > .fa-search{
    position: absolute;
    right:5px;
    top: 50%;

    /* if you know the height of the icon set margin-top: -(height/2) */
    margin-top: -8px; 

    /*else set transform: translateY(-50%)
}

此时，您在输入内部，垂直中心和右侧都有图标。

在你的情况下，你必须删除一些额外的样式才能使它看起来很好，因为你将border-radius设置为icon只需注释：

nav > .nav_ul > .nav_search > .nav_searchfield{

    //setting border-radius to the whole input
    /*border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;*/
}

nav > .nav_ul > .nav_search > .fa-search{

    //removing the border-radius for the icon
    /*border-radius: 5px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;*/
}

并且为了给出最后的触摸，将padding-right设置为文本的输入不会与图标重叠

nav > .nav_ul > .nav_search > .nav_searchfield{
    padding-right: 25px;
}

在这个FIDDLE示例中，您可以看到输入更改的高度和图标如何保持良好定位。

我希望这会有所帮助

Answer 2

输入字段的高度因浏览器而异。在我看来，确保它们高度相同的最佳方法是直接指定高度。

给输入和跨度高度为18px;

* {
  margin: 0px;
  padding: 0px;
}
body {
  background-color: rgb(226, 220, 220);
}
nav {
  width: 100%;
  background-color: #12161C;
}
nav > .nav_ul {
  width: 1000px;
  margin: 0px auto;
  font-size: 0px;
}
nav > .nav_ul > .nav_li {
  display: inline-block;
  margin: 20px 0px;
  font-size: 16px;
  margin-right: 20px;
}
nav > .nav_ul > .nav_li_last_child {
  margin-right: 0px;
}
nav > .nav_ul > .nav_li > .nav_a {
  text-decoration: none;
  background-color: #E56E04;
  display: block;
  color: white;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
nav > .nav_ul > .nav_li > .nav_a:hover {
  background-color: #F19645;
  border-color: #F19645;
}
nav > .nav_ul > .nav_search {
  position: relative;
  display: inline-block;
}
nav > .nav_ul > .nav_search > .nav_searchfield {
  margin: 20px 0px;
  width: 300px;
  font-size: 16px;
  display: inline-block;
  background-color: #545455;
  color: white;
  height: 18px;
  border: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}
nav > .nav_ul > .nav_search > .fa-search {
  font-size: 16px;
  display: inline-block;
  background-color: #545455;
  color: black;
  height: 18px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
}
.fa-user,
.fa-user-plus {
  margin-right: 10px;
}
/* ------------------ */

.float_right {
  float: right;
}
.float_left {
  float: left;
}
.clear_both {
  clear: both;
}

<!DOCTYPE>
<html>

<head>
  <link href="backbone/general.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
</head>

<body>
  <nav>
    <ul class="nav_ul">
      <div class="nav_search">
        <input class="nav_searchfield" type="text" placeholder="Search ..." />
        <span class="fa fa-search"></span>
      </div>
      <li class="nav_li float_right nav_li_last_child"><a href="#" class="nav_a"><i class="fa fa-user"></i>Login</a>
      </li>
      <li class="nav_li float_right"><a href="#" class="nav_a"><i class="fa fa-user-plus"></i>Register</a>
      </li>

      <div class="clear_both"></div>
    </ul>
  </nav>
</body>

</html>

文本输入字段显示为高于其旁边的跨度

2 个答案: