blocks|key|1563037|text|您应该能够使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1563038|​|1563039|.mywidth+{
++width:+100px;+++
}|code-block|syntax|javascript|1563040|<input+class="mywidth">
<br>
<textarea+class="mywidth"></textarea>|1563041|1563042|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>You should be able to use</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.mywidth {
  width: 100px;   
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input class="mywidth"&gt;
&lt;br&gt;
&lt;textarea class="mywidth"&gt;&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1778255|text|是的，有。试着这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1778256|<textarea+style="width:80%25">+</textarea>
<input+type="text"+style="width:80%25"+/>|code-block|syntax|javascript|1778257|两者的大小应该相等。您可以使用绝对大小(px)、相对大小(em)或百分比大小。|1778258|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Yes, there is.  Try doing something like this:</p>

<pre><code>&lt;textarea style="width:80%"&gt; &lt;/textarea&gt;
&lt;input type="text" style="width:80%" /&gt;
</code></pre>

<p>Both should equate to the same size.  You can do it with absolute sizes (px), relative sizes (em) or percentage sizes.</p>


blocks|key|1778294|text|只需注意-宽度总是受到客户端发生的事情的影响-+PHP不能影响这类事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1778295|在元素上设置一个公共类并在CSS中设置宽度是最好的选择。|1778296|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>Just a note - the width is always influenced by something happening on the client side - PHP can't effect those sorts of things.</p>

<p>Setting a common class on the elements and setting a width in CSS is your cleanest bet.</p>


blocks|key|1563147|text|其他人提到了这一点，然后把它删除了。如果要在没有类的情况下以相同的方式设置所有文本区域和文本输入的样式，请使用以下CSS+(在IE6中不起作用)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1563148|input[type=text],+textarea+{+width:+80%25;+}|code-block|syntax|javascript|1563149|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Someone else mentioned this, then deleted it. If you want to style all textareas and text inputs the same way without classes, use the following CSS (does not work in IE6):</p>

<pre><code>input[type=text], textarea { width: 80%; }
</code></pre>


blocks|key|1563217|text|使用CSS类作为宽度，然后将元素放入HTML+DIVs中，DIVs具有所提到的类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1563218|这样，布局控制总体上应该会更好。|1563219|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>Use a CSS class for width, then place your elements into HTML DIVs, DIVs having  the mentioned class.</p>

<p>This way, the layout control overall should be better.</p>


blocks|key|1563276|text|回答第一个问题(尽管这个问题已经回答得很清楚了)：CSS宽度就是你所需要的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1563277|但我想在答案中回答Gaius's+question。Gaius，你的问题是你在设置em的宽度，这是一个很好的想法，但你需要记住em是基于字体大小的。默认情况下，输入区域和文本区域具有不同的字体和大小。因此，当你将宽度设置为35em时，输入区域使用其字体的宽度，而文本区域使用其字体的宽度。文本区域的默认字体较小，因此文本框较小。以像素或磅为单位设置宽度，或确保输入框和文本框具有相同的字体和大小：|offset|length|1563278|​|1563279|.mywidth+{
++width:+35em;
++font-family:+Verdana;
++font-size:+1em;
}|code-block|syntax|javascript|1563280|<input+type="text"+class="mywidth"/><br/>
<textarea+class="mywidth"></textarea>|1563281|1563282|希望这能有所帮助。|1563283|entityMap|0|LINK|mutability|MUTABLE|url|http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/^0|0|9|G|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@$D|11|E|12|1|13]]|A|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|O|3|G|5|6|7|17|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|18|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<p>To answer the first question (although it's been answered to death): A CSS width is what you need.</p>

<p>But I wanted to answer <a href="http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/" rel="nofollow noreferrer">Gaius's question</a> in the answers.  Gaius, you're problem is that you are setting the width's in em's.  This is a good think to do but you need to remember that em's are based on font size.  By default an input area and a textarea have different font faces &amp; sizes.  So when you are setting the width to 35em, the input area is using the width of it's font and the textarea is using the width of it's font.  The text area default font is smaller, therefore the text box is smaller.  Either set the width in pixels or points, or ensure that input boxes and textareas have the same font face &amp; size:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.mywidth {
  width: 35em;
  font-family: Verdana;
  font-size: 1em;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" class="mywidth"/&gt;&lt;br/&gt;
&lt;textarea class="mywidth"&gt;&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>

<p>Hope that helps.</p>


blocks|key|1563347|text|正如在Unequal+Html+textbox+and+dropdown+width+with+XHTML+1.0+strict中提到的，它还取决于您的文档类型。我注意到，当严格使用XHTML1.0时，宽度上的差异确实出现了。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1563348|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/161915/unequal-html-textbox-and-dropdown-width-with-xhtml-10-strict^0|3|1P|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>As mentioned in <a href="https://stackoverflow.com/questions/161915/unequal-html-textbox-and-dropdown-width-with-xhtml-10-strict">Unequal Html textbox and dropdown width with XHTML 1.0 strict</a> it also depends on your doctype.
I have noticed that when using XHTML 1.0 strict, the difference in width does indeed appear.</p>


blocks|key|1563362|text|您还可以使用以下CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1563363|.mywidth{
width:100px;
}
textarea{
width:100px;
}|code-block|syntax|javascript|1563364|HTML：|1563365|<input+class="mywidth"+>
<textarea></textarea>|1563366|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>you can also use the following
CSS: </p>

<pre><code>.mywidth{
width:100px;
}
textarea{
width:100px;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;input class="mywidth" &gt;
&lt;textarea&gt;&lt;/textarea&gt;
</code></pre>


blocks|key|1778580|text|使用CSS3使textbox和input的工作方式相同。参见jsFiddle。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1778581|.textarea,+.textbox+{
++++width:+200px;
++++-webkit-box-sizing:+border-box;
++++-moz-box-sizing:+border-box;
++++box-sizing:+border-box;+
}|code-block|syntax|javascript|1778582|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/68Z5J/^0|U|8|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Use CSS3 to make textbox and input work the same. See <a href="http://jsfiddle.net/68Z5J/" rel="nofollow">jsFiddle</a>.</p>

<pre class="lang-css prettyprint-override"><code>.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}
</code></pre>


blocks|key|1563410|text|input[type="text"]+{+width:+60%25;+}+
input[type="email"]+{+width:+60%25;+}
textarea+{+width:+60%25;+}
textarea+{+height:+40%25;+}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1563411|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>input[type="text"] { width: 60%; } 
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }
</code></pre>


blocks|key|1778601|text|现在，如果您使用bootstrap，只需为您的输入字段提供form-control类。类似于：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1778602|<label+for="display-name">Display+name</label>
<input+type="text"+class="form-control"+name="displayname"+placeholder="">

<label+for="about-me">About+me</label>
<textarea+class="form-control"+rows="5"+id="about-me"+name="aboutMe"></textarea>|code-block|syntax|javascript|1778603|entityMap^0|T|C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>These days, if you use bootstrap, simply give your input fields the <code>form-control</code> class. Something like:</p>

<pre><code>&lt;label for="display-name"&gt;Display name&lt;/label&gt;
&lt;input type="text" class="form-control" name="displayname" placeholder=""&gt;

&lt;label for="about-me"&gt;About me&lt;/label&gt;
&lt;textarea class="form-control" rows="5" id="about-me" name="aboutMe"&gt;&lt;/textarea&gt;
</code></pre>


<p>Is there a simple way of getting a HTML textarea and an input type="text" to render with (approximately) equal width (in pixels), that works in different browsers?</p>

<p>A CSS/HTML solution would be brilliant. I would prefer not to have to use Javascript.</p>

<p>Thanks
/Erik</p>


Is there a simple way to make html textarea and input type text equally wide?

有没有一种简单的方法可以让一个HTML和一个输入的type=“文本”以(大致)相等的宽度(以像素为单位)呈现，并且可以在不同的浏览器中工作？一个CSS/HTML解决方案就很棒了。我不希望必须使用Javascript。谢谢/Erik

问有没有一种简单的方法可以使html文本区域和输入类型的文本宽度相等？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有一种简单的方法可以使html文本区域和输入类型的文本宽度相等？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有一种简单的方法可以使html文本区域和输入类型的文本宽度相等？
EN