发表新帖
发表新帖

CSS - Exact same height and alignment of button and input text box

后端 未结
关注
12 1338
花落未央
花落未央 2020-12-04 15:40

I need to have a button and a tex box sitting next to each other and they have to align up perfectly as if one is bigger than the other then it will be instantly noticeable.

相关标签:
12条回答
  • -上瘾入骨i
    2020-12-04 16:09

    I am trying to solve this for days and every solution is not whole, and not working in different browsers.

    I find that this code do the work:

    float: left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height: 33px;

    I have updated Fiddle - https://jsfiddle.net/p9maozk2/

    0 讨论(0)
  • 小鲜肉
    2020-12-04 16:17

    I've been pulling my hair for hours trying to achieve this. After a lot of research and experimentation, here's the recipe for solving the OP's problem in (at least contemporary versions of) Chrome, Firefox, IE, Opera and Safari:

    1. Use the same CSS regarding the box model for all types of nodes you need to align (button, input, select);
    2. DO specify the border explicitly (or at least its width);
    3. DO NOT specify the height explicitly.

    Yes, that's all there is to it. Here's the most minimalist CSS that produces the desired results:

    select, input, button {
    border-width: 0px;
}

    If you need further styling, feel free to add color, padding and margins -- everything will work out fine. But, no matter what you do, do NOT specify the height explicitly. That's the only deal breaker, because each browser calculates the height differently; some will leave an extra pixel or two above the select and not the button, some will leave them above the button and not the select, and some will work as expected.

    For the record, Chrome seems to be the most consistent in this regard (that is, if you do specify the height) -- but then again, who cares.

    0 讨论(0)
  • 广开言路
    2020-12-04 16:21

    For IE: You can style things differently by using conditional stylesheets:

    <!--[if lt IE 7]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="ie7e" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->

    So you would write:

    .ie6 .my-button-class {
  //
}
    0 讨论(0)
  • 你的背包
    2020-12-04 16:26

    I think this is very bulletproof:

    http://codepen.io/herrfischer/pen/pbkyoJ

    On both elements just use: 

    display: inline-block;
padding: 10px 15px;
font-size: 20px;
border-radius: 0;
-webkit-appearance: none;
border: 1px solid transparent;

    And use "normalize.css" - that's all. Looks good on iPhone, too:

    0 讨论(0)
  • 挽巷
    2020-12-04 16:26

    Use a background div with an image for the input. That is much easier to keep consistent. Also, absolute positioning is good for this type of situation.

    edit: I wrote this answer 5 years ago, there are better ways now.

    0 讨论(0)
  • 故里飘歌
    2020-12-04 16:27

    When trying to achieve pixel perfect dimensions in a cross-browser way, the very first thing you should do is consider implementing a CSS reset. I prefer HTML5 Boilerplate, but there are others you can find from googling.

    The CSS reset is really fundamental in normalizing cross-browser differences (especially when dealing with forms).

    0 讨论(0)
 看不清?
提交回复
热议问题