html <input> element ignores CSS left+right

2019-02-04 10:17发布

站内问答 / HTML/CSS
1313 4 5

I've noticed that the <input> element in HTML ignores the CSS pair of "left" and "right" properties. Same for the pair "top" and "bottom". See the sample code below:

<html>
    <head>
        <style><!--
        #someid {
            position: absolute;
            left: 10px;
            right: 10px;
            top: 10px;
            bottom: 10px;
        }
        --></style>
    </head>
    <body>
        <input type="text" id="someid" value="something"/>
    </body>
</html>

The <input> should take up almost all space in the browser (except a border of 10px around it). It works fine in Safari, but in FireFox and IE the <input> stays small in the top-left corner of the browser.

If I use "left" and "width", and "top" and "height", then everything works fine. However I don't know what is the width and the height, I want them adjusted depending of the size of the browser window.

Any ideas how to work around this?

Thanks.

4条回答
Deceive 欺骗
2楼-- · 2019-02-04 10:41

It's not ignoring left or top, you'll see it does position 10px out. What's happening is that the right and the bottom are not being respected. Form elements are treated a little bit specially in layout engines, it's entirely possible FF/IE consider the width/maxlength of the input more important, I haven't really looked into why that might be.

It's a bit of a strange thing to do though. Perhaps what you'd be better off doing is looking at <textarea> which is designed to provide a large text input, which you can push to 100% dimensions by applying width: 100%; height: 100%; and take care of the 10px margin on a container div.

WFM:

<html>
<head>
    <style>
    body
    {
        margin: 0px;
    }
    div
    {
        position: absolute; margin: 2%; width: 96%; height: 96%;
    }
    textarea
    {
        position: absolute; width: 100%; height: 100%; 
    }
    </style>
</head>
<body>
    <div>
        <textarea></textarea>
    </div>
</body>

查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
3楼-- · 2019-02-04 10:49

You can Use a Wrapper DIV

        <html> 
            <head> 
                    <style><!-- 
                #wrapper { 
                    position: absolute; 
                    left: 10px; 
                    right: 10px; 
                    top: 10px; 
                    bottom: 10px; 
                } 
                #someid { 
                  /*  position:relative;  EDIT: see comments*/
                    height:100%; 
                    width:100% 
                }
    --></style>
                </head>
            <body>
              <div id="wrapper">
              <input type="text" id="someid" value="something"/>
              </div>
           </body>
       </html>
查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
4楼-- · 2019-02-04 10:51

The way it looks in Safari is not how it should display. Because you didn't specify a height value, the input will default to the size of the last inherited font size.

The right and bottom positioning will also be ignored because you're trying to set the top and left margins at the same time. Looks like they take precedence in this case.

If you need to use the input field and have it display inside the entire width and height of the browser window at the time it is seen, you need to redo the CSS like this:

body{
    margin:10px;
}

#someid{
    display:block;
    margin:0 auto;
    width:100%;
    height:100%;
}

This will stretch the input field to as high and wide as the user has their browser window. It will also have a margin around each side of 10 pixels from the browser window.

If you have to have a margin, then set that in the body style or a wrapper DIV around the input field.

查看更多
0人赞 添加讨论(0) 举报
你好瞎i
5楼-- · 2019-02-04 10:53

http://reference.sitepoint.com/css/bottom say, regarding internet explorer (<= 6)

don’t support the specification of both the position and the dimensions of an absolutely positioned element using top, right, bottom, and left together; they’ll use the last vertical and horizontal position specified, and need the dimensions to be specified using width and height

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)