我有一个<textarea>对象，50 cols width。我想要一个<button>和<textarea>对象一样宽的。这可能吗？。如果不是，多少像素是 1 cols。或者我很困惑和cols不威慑的width的<textarea>根本。在这种情况下，对象的默认值width是<textarea>什么？
（我不想使用 javascript 来获取宽度，因为我正在构建一个 chrome 扩展，所以它必须是轻量级的）
先感谢您！
编辑：
如果我必须使用width它，好的。但我想要与现在完全相同的宽度，因为它非常适合。那么如何将列转换为宽度？我使用最新的 CSS 版本（以及最新的 HTML），并且该页面仅在 chrome 上运行。
根据您编写 HTML 的方式 - 请记住在您的问题中显示您的 [mcve] 代码，这使我们更容易提供帮助和提供实用建议 - 有一些选项：
*,
::before,
::after {
/* forcing all elements, and the listed pseudo-elements,
to use the border-box sizing; including padding and
margins into the calculated width: */
box-sizing: border-box;
/* resetting margin and padding to zero for consistency: */
margin: 0;
padding: 0;
}
div {
/* the default margin for all <div> elements, to move them
apart from the left-edge of the viewport and away from
their predecessor: */
margin: 1em 0 0 1em;
}
div.withBlock {
/* we want the <div> to collapse to the size of the
<textarea>: */
display: inline-block;
}
div.withBlock textarea {
/* using display: block to force the <button> to a new
line: */
display: block;
}
div.withBlock button {
/* specifying a 100% width, which will cause the
<button> to be the full width of the parent -
<div> - element, which is itself shrunk down
to the width of the <textarea>: */
width: 100%;
/* to separate the two elements for visibility: */
margin-top: 10px;
}
div.withGrid {
/* using CSS Grid layout: */
display: grid;
/* defining the one column as min-content, which
causes the column to be the minimum width
required to display its largest content (in this
case that is the <textarea> with its defined width:*/
grid-template-columns: min-content;
/* to separate the contents from each other with a
10px gutter: */
grid-gap: 10px;
}
div.withFlex {
/* this emulates the previous 'display: inline,' but
uses the flexbox layout within the <div>; causing
the <div> to collapse to the size of its largest
child element: */
display: inline-flex;
/* the automatic value of flex-direction is 'row,' so
because we want columns (I think) we're specifying
the following value: */
flex-direction: column;
}
div.withFlex button {
margin-top: 1em;
}<!-- we wrap each <textarea> and <button> pair in a parent <div>,
though in practice you may have them wrapped in something
like a <fieldset>, or the <textarea> may be wrapped in a
<label> with the <button> being a sibling of that <label> -->
<div class="withBlock">
<textarea cols="50" rows="10"></textarea>
<button>the button</button>
</div>
<div class="withGrid">
<textarea cols="50" rows="10"></textarea>
<button>the button</button>
</div>
<div class="withFlex">
<textarea cols="50" rows="10"></textarea>
<button>the button</button>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句