在两个全宽的标签之间显示一个文本区域

我需要在两个标签之间显示一个文本区域，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

来源

2013-11-26 sanjayav

这似乎可能与类似于下面的东西。

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/

来源

2013-11-28 00:49:58 sanjayav

100％是指所有因此对于其他文字没有空间。比如说，为您的textarea添加15％和70％的广告，所有广告都可以达到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/

来源

2013-11-26 05:38:03 multimediaxp

不幸的是，标签是动态的，因此这个问题:) – sanjayav

所以显示动态标签和如何演示希望视图对它做出反应。 – Tejas

然后，您可能需要使用JS来获取每个标签的宽度，并从textarea的100％中减去它。虽然它是动态的，但百分比总是受到尊重，但里面的文本需要调整到这个宽度。 – multimediaxp

在两个全宽的标签之间显示一个文本区域

回答

相关问题