與同一行上的跨度對齊標籤 - CSS

好吧，我真的很尷尬，我無法弄清楚這一點，但... 我有一個「必需」星號後面的表格標籤。星號簡單地放在標籤文本下的下一行，而不是在文本旁邊對齊。與同一行上的跨度對齊標籤 - CSS

我希望所需的星號最終在與標籤文本相同的行上。我不應該使用浮動這個權利？他們在同一個分區，所以我不確定他們爲什麼不是彼此相鄰。

謝謝！

enter image description here

<div id="letsGetStarted"> 
    @using (Html.BeginForm()) 
    { 

     @Html.ValidationSummary(true) 

     <div>@Html.LabelFor(model => model.NewClub.NewClubName) <span class="required">&#42;</span></div> 
     @Html.EditorFor(model =>model.NewClub.NewClubName) 
     @Html.ValidationMessageFor(model => model.NewClub.NewClubName) 


     <div> 
      @Html.LabelFor(model => model.ClubTypes) <span class="required">&#42;</span> 
     </div> 

     @Html.DropDownListFor(model => model.ClubTypes, Model.ClubTypes) 
     @Html.ValidationMessageFor(model => model.ClubTypes) 

     <p> 
      <input type="submit" name="submit" value="Submit" class="btn"/> <input type="reset" name="reset" value="Cancel" class="btn ltgrey" /> 
     </p> 
    } 
</div>

我有問題here的工作示例：

來源

2013-10-17 Slinky

裹跨度到<label></label>

<div> 
    <label for="NewClub_NewClubName">Name your club <span class="required">*</span></label> 
</div>

你可以設置margin將它移動到根據離開你需要：

Example

Updated Fiddle

更新

當您使用@LabelFor()所以把這個交給您的標籤：

display:inline;

來源

2013-10-17 15:02:44

doh！完美的感謝 – Slinky

樂意提供幫助:-) –

問題出在一個LabelFor幫手，你不能在標籤標籤之間注入HTML – Slinky

如果你不能與HTML一塌糊塗，但你可以CSS>

label{display:inline; clear:both;}

要小心，因爲這會影響到所有的標籤......

來源

2013-10-17 15:06:52 marinbgd

嘗試這個

 

    #letsgetStarted { 
     overflow:hidden; 
    } 
    #letsgetStarted label { 
     float:left; 
     width:auto; 
    } 
    #letsgetStarted span.required { 
     float:left; 
    }

將標籤標籤內的HTML文本。雖然我沒有嘗試過。它應該適合你。

來源

2013-10-17 15:13:02 Rockr

在普通的HTML5和CSS3中，您可以使用以下規則。我不知道如何將此轉化爲ASP.net：

.required:after { 
    content: "*"; 
}

然後，只寫你的HTML作爲

<div> 
    <label for="NewClub_NewClubName" class="required">Name your club.</label> 
    <input ...> 
</div>

在另一方面，你可以使用HTML5 required屬性，這是我不知道如何翻譯成ASP。用placeholder，你可能不需要標籤。

<div> 
    <input type="text" name="newClub" placeholder="New club name" required/> 
</div>

您可以使用僞類:required來設計它。如果你把標籤之後，所以你可以使用CSS3選擇器相鄰，你甚至可以嘗試：

<div> 
    <input type="text" id="newClub" name="newClub" 
     placeholder="New club name" required/> 
    <label for="newClub">New club name.</label> 
</div>

和

input:required + label:before { 
    content: "*"; 
    color: red; 
}

但同樣，我不知道的ASP。

來源

2013-10-17 15:32:12

與同一行上的跨度對齊標籤 - CSS

回答

相關問題