Question

我需要在两个标签之间显示文本区域，并且textarea需要使用最大值宽度可用，而不会使任何标签移出行。

我一直在努力尝试一些没有太多运气的款式！

HTML

<body>
    <div class="wrapper"> 
        <span class="preTextContainer">Pre Text</span>
        <span><textarea class="fullWidthTextArea">Some text area content</textarea></span>
        <span class="postTextContainer">Post Text</span>
    </div>
</body>

CSS

.wrapper {
    white-space: nowrap;
}

.preTextContainer {
    float:left;
}

.postTextContainer {
    float:right;
}

textarea.fullWidthTextArea {
    width: 100%;
}

的jsfiddle： http://jsfiddle.net/pGrpZ/

我想要实现的目标如下：

enter image description here

Answer 1

100％表示ALL，因此您的其他文本没有空格。添加到每个范围，比如15％和70％的textarea，所有广告一起高达100％。您将需要使您的跨度显示块。边境也算!!!所以你只需要69％或68％的textarea

.wrapper {
    white-space: nowrap;
}

.preTextContainer {
    float:left;
    display:block;
    width:15%
}

.postTextContainer {
    float:right;
    display:block;
    width:15%
}

textarea.fullWidthTextArea {
    width: 68%;
    float:left;
    display:block;
}

http://jsfiddle.net/JCpZu/

Answer 2

似乎可以使用以下内容。

<强> HTML

<div class="container">
    <span class="label">Pre Text</span>
    <span class="field "><textarea class="large">Some text area content</textarea></span>
    <span class="label">Post Text</span> 
</div>

<强> CSS

.container
{
    display:table-row;
    width:100%;
}

.field
{
    display: table-cell;
    width: 100%;
}

.label
{
    display: table-cell;
    width: 1px;
    white-space: nowrap;
}

textarea.large {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/aP57W/

在全宽度的两个标签之间显示textarea

2 个答案: