样式输入和按钮 - 高度问题 [英] Styling Input and button - height issue

问题描述

我尝试设置一个干净的CSS来设置按钮的样式，看起来与near输入字段合并。 i.imgur.com/Edb2XVY.pngalt =example>

我目前正在使用此CSS：

 按钮{
 position：relative; 
 left：-4px; 
 box-sizing：border-box; 
 padding：0 10px; 
 margin：0; 
 font-size：17px; 
 border：1px solid gray; 
 border-radius：0 3px 3px 0; 
} 
  

^{只需从 span 和向输入和按钮添加边框即可删除边框。）}

I'm trying to setup a clean CSS to style a button to visually looks merged with the near input field.

I'm using this CSS currently:

button {
    position: relative;
    left: -4px;
    box-sizing: border-box;
    padding: 0 10px;
    margin: 0;
    font-size: 17px;
    border: 1px solid gray;
    border-radius: 0 3px 3px 0;
}

http://jsfiddle.net/GRwqL/

The main problem is the usage of the left property, I don't think it's a good practice, mostly because it's not handled correctly on all browsers.
The other problem is that this code in Internet Explorer and Firefox makes the button not high as the input field.

So I was looking for some help to write a better code cross-browser and cleaner.
Personally I don't care if is needed a wrapper element or any other HTML element, I just need a clean code, cross browser and that works well.

解决方案

<span class="inputWithButton">
  <input type="text"><button>Submit</button>
</span>

 input, button{outline: none;}

.inputWithButton{
    display:inline-block;
    overflow:hidden;
    border:1px solid gray;
    border-radius: 3px;
}
.inputWithButton > *{
    vertical-align:top;
    border:0;
    margin:0;
    padding: 3px 10px;
}
.inputWithButton > input[type=text]{
    width:150px;
}
.inputWithButton > button{
    border-left:1px solid gray;
    background:#eee;
    cursor:pointer;
    width:70px;
}
.inputWithButton > button::-moz-focus-inner {
  border: 0;
}

DEMO with higher paddings and different borders colors : http://jsbin.com/OPiroyib/4/edit

^{(Just remove border from the span and add border to both input and button) That easy.}

这篇关于样式输入和按钮 - 高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！