CSS不能在textarea上工作

我是新來的CSS - 和js/jquery/asp.net等，目前在一個很大的學習曲線！ :) - 我有以下樣式，但由於某種原因，它不適用於文本框 - 我錯過了一些非常簡單的東西嗎？CSS不能在textarea上工作

.label-wrapper 
{ 
    position: relative; 
    min-width: 100px; 
    max-width: 600px; 
    height: 24px; 
    display:block; 
    margin-left: 10px; 

} 

.label-wrapper > label 
{ 
    position: absolute; 
    left: 0; 
    width: 85px; 
    height: 50px; 
} 

.label-wrapper > span 
{ 
    position: absolute; 
    left: 0; 
    width: 190px; 
    height: 50px; 
} 

.label-wrapper > button 
{ 
    position: absolute; 
    left: 170px; 
    width: 300px; 
} 

.label-wrapper > textarea 
{ 
    position: absolute; 
    left: 170px; 
} 

.label-wrapper > input[Type=Text] 
{ 
    position: absolute; 
    left: 170px; 
    width: 250px; 

} 
.label-wrapper > input[id=txtDateReceived] 
{ 
    position: absolute; 
    left: 170px; 
    width: 100px; 

}  

.label-wrapper > input[id=txtDateReceivedTime] 
{ 
    position: absolute; 
    left: 280px; 
    width: 70px; 
} 
.label-wrapper > select 
{ 
    position: absolute; 
    left: 170px; 
    width: 300px; 
    height: 24px; 
}

見的jsfiddle這裏>http://jsfiddle.net/eoykms9o/

我想點擊Me按鈕備註區域下出現，最好出jobDetails的 DIV

在此先感謝

來源

2015-04-01 leddy

我知道你只是學習，但這次真的ISN你應該建立網頁的方式。對所有東西使用絕對定位意味着它像留言板上的音符一樣粘在牆上。你應該把你的頁面看作更像一個項目下面的另一個項目。看看[Bootstrap]（http://www.getbootstrap.com/）是這種事情的一個很好的起點。 – rtpHarry 2015-04-01 10:50:47

你也可以把表格放在一張桌子裏，一切都會看起來一致。對所有事物使用絕對定位是一個壞主意。 – rigon 2015-04-01 11:04:54

感謝您的絕對定位的擡起頭 - 這是我創建得到一些XML/Web服務頁面調用功能的工作（不包括在上面的代碼），也不會真正結束了尋找這樣的 - 這只是煩我，我無法讓它對齊。我會看Bootstrap，並重建它，我認爲。再次感謝 – leddy 2015-04-01 11:18:59

這是剛剛加入兩個<br />標籤最簡單的辦法：

 <textarea id="txtNotes" rows="5" cols="50"></textarea> 
     </div> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
        <div class='label-wrapper'> 
      <button id="TestButton2" type="button"> 
       Click me</button> 
      <br /> 
      <br /> 
     </div>

但遺憾的說，該頁面總體上使用非常糟糕的開發技術。

我知道你只是在學習，但這真的不是你應該建立網頁的方式。

對所有東西都使用絕對定位意味着它粘在牆上，就像留言板上的筆記一樣。你應該把你的頁面看作更像一個項目下面的另一個項目。

查看Bootstrap這是一個很好的起點。

來源

2015-04-01 10:54:24 rtpHarry

是的，你可以添加更多
，它會工作，但這不是你的方式想，如果你想提高 – 2015-04-01 11:02:55

@FrankWinters我完全同意學習CSS，我也把評論在最頂端，但可能要在這裏重申它。 – rtpHarry 2015-04-01 11:03:49

嘗試像此

textarea{ 
/*style */ 
} 
#txtNotes{ 
    /*style */ 
}

Fiddle

來源

2015-04-01 10:48:01 user3386779

只需添加兩個<br/>

http://jsfiddle.net/eoykms9o/5/

來源

2015-04-01 10:53:44 Freijlord

是的，你可以添加更多
它工作，但這真的不是你想要學習CSS的方式，如果你想改善 – 2015-04-01 11:02:13

我想我點擊按鈕，備註區域下出現，最好出jobDetails的div的

這種情況position: absolute的，因爲這樣textarea父div.label-wrapper無法正常自動設置高度。爲了解決這個問題，你可以明確地設置這個div.label-wrapper的高度。

或者不要使用absolute定位。我沒有看到你使用絕對定位的原因。

來源

2015-04-01 10:55:19 phts

我認爲絕對定位的原因是因爲dev的不知道如何使項目排隊旁邊的標籤形式，但我同意，這不是事情應該做的方式。 – rtpHarry 2015-04-01 10:56:21

你應該從你的css中替換.label-wrapper>按鈕並使用它。

.label-wrapper > button { 
    left: 190px; 
    width: 300px; 
    margin-top: 20px; 
    margin-left: 100px; 
    }

來源

2015-04-01 10:59:53

你只需要添加Notes:父DIV即<div class"label-wrapper teaxtarea-wrapper">不是把下面的CSS的CSS文件：

.teaxtarea-wrapper{height: 76px;}

做...

來源

2015-04-01 11:06:25

CSS不能在textarea上工作

回答

相關問題