在兩個全寬的標籤之間顯示一個文本區域

我需要在兩個標籤之間顯示一個文本區域，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

在兩個全寬的標籤之間顯示一個文本區域

回答

相關問題