发表新帖
发表新帖

Problem with <input type='text' /> and <textarea> width

后端 未结
关注
6 722
感情败类
感情败类 2020-12-19 03:04

In the following code, both the INPUT and TEXTAREA elements render wider than they should. How can I limit them to 100% of the usable area within the div?

&
相关标签:
6条回答
  • 孤街浪徒
    2020-12-19 03:18

    xhtml strict code seems to do that with forms. i just make the inputs and textareas stretch at 99% and that seems to work. give that a try.

    0 讨论(0)
  • 无人及你
    2020-12-19 03:32

    Inputs and textareas both have borders by default

    <style>
   .mywidth{ 
     width:100%;
     border:0;
    } 
</style>

    will render all the elements within your container.

    Update

    IE also has left and right padding on each element and the following css fits all the elements within the container in FF3, FF2, Safari 3, IE6 and IE7.

    <style>
   .mywidth{ width:100%; border:0; padding-left:0; padding-right:0; }
</style>

    However, don't forget that you will probably need a border, and perhaps the padding too, in order to make the fields appear to users as normal. If you set that border and padding yourself then you will know what the difference is, across browsers, between the width of the container and the width you will need to give to the input/textarea elements.

    0 讨论(0)
  • 醉酒成梦
    2020-12-19 03:35

    Add "padding-right:3px;" to the div so it reads as:

    <div style="border: 3px solid green;padding-right:3px; width: 100px;">

    Because you have added a border to the div that also counts as internal space of the div.

    The reason it works without the doc declaration is that the browser does not render the page as transitional XHTML but plain old html which has a different rendering method for div's etc.

    0 讨论(0)
  • 无人及你
    2020-12-19 03:36

    @Phil has the answer, above.

    Incidentally, using Firebug does, indeed, show the default borders on the textarea and input elements. So, using Firebug might have helped.

    0 讨论(0)
  • 一整个雨季
    2020-12-19 03:39

    I had this same problem. I used the box-sizing property mentioned here:

    How can I make a TextArea 100% width without overflowing when padding is present in CSS?

    Here's what it looked like for me:

    <style>
   .mywidth{ 
     width:100%;
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
    } 
</style>
    0 讨论(0)
  • 谎友^
    2020-12-19 03:41

    You could try using this DOCTYPE instead

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    0 讨论(0)
 看不清?
提交回复
热议问题