CSS - 使用標籤標籤格式化表單

我有一個表單，我試圖用CSS語義和格式進行佈局。由於它是動態生成的（從ASP.NET MVC開始），某些元素可能會呈現爲文本而不是輸入標記，因爲它們對於該屏幕可能是隻讀的。我試圖給標籤標籤添加一個寬度來整理表單並對齊值/值框，但似乎我只能在浮動它們時才能做到這一點（是否正確？）。當我在標籤標籤之後呈現值時，這可以正常工作，但是如果值爲空白，則左側浮動標籤似乎與先前標籤相疊加，即使兩者都包含在p標籤中（這些應該是塊級別，是的？）。如果有的話，我做錯了什麼？CSS - 使用標籤標籤格式化表單

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /><title> 

    Edit 

</title> 
     <!-- Next Style Section Is Just To Set Up Classes, it will be moved to .CSS file --> 
     <style type="text/css"> 
      div.FieldGroup {background-color: Blue; } 
      p.Field { display: block; } 
      span.NoteHeader { font-style: italic;} 
      label { float: left; width: 150px;} 
     </style> 
</head> 

<body> 
    <div id="main"> 


    <h2>Edit</h2> 



    <form action="" method="post"> 
     <div id="MainSection" class="FieldGroup"> 
      <fieldset> 
       <legend>Person Identification</legend> 
       <p class="Field"> 
        <label>Name:</label> 
        Name 
       </p> 
       <p class="Field"> 
        <label for="Colour">ChildStatus:</label> 
        <select id="Colour" name="Colour"> 
         <option value="10">Red</option> 
         <option value="20">Yellow</option> 
         <option selected="selected" value="30">Orange</option> 
        </select> 
       </p> 
       <p class="Field"> 
        <label for="Age">Age:</label> 
        <input id="Age" name="Age" type="text" value="" /> 

       </p> 
       <p class="Field"> 
        <label>Birthplace:</label> 
       </p> 
       <p class="Field"> 
        <label for="Reference">Reference:</label> 
        <input id="Reference" name="Reference" type="text" value="" /> 
       </p> 
      </fieldset> 
     </div> 
    </form> 
    </div> 

</body> 
</html>

乾杯

（PS - 我不能在只讀文本框添加到包含這些空白，因爲他們想，如果他們不能改變數值純文本）

來源

2009-08-21 Mad Halfling

任何原因你包裝你的標籤/輸入段落元素？這可能工作正常，但語義上不應該是divs？也許它對我的想法太過分了，但我能想到的一件事是你想要在p.Field風格中明確地設置很多無聊的風格值，因爲瀏覽器都爲p標籤添加了不同的東西（邊距和填充特別是），很少有任何一個瀏覽器是相同的。至少在一個div中，你知道大多數瀏覽器應該把它當作一個只有所有樣式默認爲0或空白的容器。 – 2009-08-21 16:59:31

我已經改變了嘗試它，但它沒有對問題做任何改變。 – 2009-08-21 17:12:10

添加明確：既要你p.Field聲明：

p.Field { 
    display: block; 
    clear: both; 
}

來源

2009-08-21 17:59:24 Pat

謝謝，另一個表單上的其他人建議清除：left，這似乎就足夠了。 – 2009-08-23 10:51:09

我將ps更改爲div，效果更好（ps是VS的默認值） – 2009-09-24 13:24:27

將clear：left屬性添加到標籤的CSS。

來源

2009-08-21 16:47:54 MyItchyChin

這不起作用，這意味着下面的輸入框移動到前一行的末尾 – 2009-08-21 17:14:51

你並不需要浮動的label S IN以確定其寬度，你只需要改變他們的display到block。如果你將它們浮起來，它們包含的p塊將不會擴大以包圍它們，除非給出overflow的hidden或auto。清除label也可以防止堆疊，但這一切都取決於你想要的外觀。

來源

2009-08-25 05:53:58

CSS - 使用標籤標籤格式化表單

回答

相關問題