发表新帖
发表新帖

Aligning text and select boxes to the same width in CSS?

前端 未结
关注
7 1574
误落风尘
误落风尘 2020-12-22 23:32

Ok this is seemingly impossible to get right. I have a text box and a select box. I want them to be the same width exactly so they line up on the left margin and the right m

相关标签:
7条回答
  • 忘了有多久
    2020-12-22 23:52

    This will get you close, but that level of precision is nearly impossible.

    <div style="width: 200px"><input type="text" style="width: 100%; margin: 0; padding: 0" /></div>
<div style="width: 200px">
    <select id="Select1" style="width: 100%; margin: 0; padding: 0">
        <option>1</option>
    </select>
</div>
    0 讨论(0)
  • 傲寒
    2020-12-22 23:52

    Try removing the default borders from both elements:

    select, input {
 border:0;
}
    0 讨论(0)
  • 北荒
    2020-12-22 23:57

    Add a class to both the select and input tags in question ie:

    <input class='custom-input'/>
<select class='custom-input'></select>

    then modify the css below to fit your design:

    .custom-input {
        width:140px;
        border:1px solid #ccc;
        margin:1px;
        padding:3px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing:content-box;
        -moz-box-sizing:content-box;
        -webkit-box-sizing:content-box;
        box-sizing:content-box;
    }

    obvs this is a fix for supporting browsers

    0 讨论(0)
  • 刺人心
    2020-12-23 00:08

    Different browsers apply different styles by default. I found that resetting both margin and padding to 0 makes both elements equal widths in both Firefox and Chrome.

    <html>
    <head>
        <title>Test</title>
        <style type="text/css">
            input, select {
                margin: 0;
                padding: 0;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br />
        <select>
            <option>123</option>
        </select>
    </body>
</html>

    I personally like to use a minimal CSS reset stylesheet like YUI CSS Reset before attempting to make a design look great in multiple browsers.

    0 讨论(0)
  • 渐次进展
    2020-12-23 00:10

    Yes, extremely frustrating. However, I never had problems with that 'till I put a "<!DOCTYPE html>" tag at the top of my HTML page. My webpage rendered properly on all platforms that I could test until I put that tag at the top of my document.

    While that's "genuine spec", it seems to be the source of these alignment problems. FWIW, I'm using HTML5 elements, in-line CSS, etc., all without that tag to specify HTML5. YMMV.

    0 讨论(0)
  • 刺人心
    2020-12-23 00:13

    If u use tables 4 inputs u could use the following solution - also compatable with ie7:

    <tr style="width:1px;"><td style="width:inherit;position:relative;">
    <select style="width:100%;"> 
    </select> 
</td></tr>
<tr><td>
    <input type="text" style="width:150px;"/>
</td></tr>

    That way the table cell width will be fixated to the width of the input,

    And that way the select would therefore always take the remaining width and perfectly line up with d input.

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