Question

跨度不会扩展到文本输入的高度，我只想让它们具有相同的高度。我不知道为什么它不会扩展

input{
font-size: 28px;
border: none;
margin: 0;
}
#searchbox{
font-family: 'Source Sans Pro', sans-serif;
outline: none;
font-size: 18px;
margin: 0 auto;
padding: 5px 0 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
background-color: #FFF
}
#searchinput{
padding: 5px;
-webkit-border-radius: 5px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-box-shadow: none;
}
#searchgo{
padding: 5px;
background-image: url(images/arrow.png);
background-repeat:no-repeat;
width: 40px;
background-position: 0 -1px;
-webkit-border-radius: 0;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-box-shadow: none;
text-indent: -500em;
}

Answer 1

使用规则font-size: 28px;

替换选择器input {}中的规则font-size: inherit;

Answer 2

将display:inline-block;与span类

一起使用

#searchbox{
    display:inline-block;
}

Js Fiddle

Answer 3

默认情况下，

<span>是内联元素。将内联元素更改为块元素显示：内联块;

内联元素显示在父元素的同一行上，但每个块级元素将出现在具有自己的宽度和高度的下一行上。我们需要跨度在同一行和块中，因此您可以使用内联块属性进行显示，以便在同一行中跨度将采用自己的宽度高度。

跨度不适合圆形输入

3 个答案: