對齊複選框旁邊的文本

簡單的問題，無疑是一個簡單的解決方案 - 儘管搜索SO和Google一段時間，但我仍然很難找到它。對齊複選框旁邊的文本

所有我希望做的是採取文字摘要「我感興趣的是增強上市或優質型材，（我們團隊的成員將與更多的信息及時回覆。）」，並讓它對準在複選框的右側（文本左對齊），但不像現在那樣環繞它。

這裏的（使用造型PureCSS）我JSFiddle

代碼：

<form class="pure-form pure-form-aligned"> 
        <fieldset> 
         <div class="pure-control-group"> 
          <label for="name">Product Name</label> 
          <input id="name" type="text" placeholder="Username"> 
         </div> 

         <div class="pure-control-group"> 
          <label for="password">Contact Name</label> 
          <input id="password" type="text" placeholder="Password"> 
         </div> 

         <div class="pure-control-group"> 
          <label for="email">Contact Email</label> 
          <input id="email" type="email" placeholder="Email Address"> 
         </div> 

         <div class="pure-control-group"> 
          <label for="foo">Website</label> 
          <input id="foo" type="text" placeholder="Enter something here..."> 
         </div> 

         <div class="pure-control-group"> 
          <label for="foo">Description:</label> 
          <textarea id="description" type="text" placeholder="Enter description here..."></textarea> 
         </div>      

         <div class="pure-controls"> 
          <label for="cb" class="pure-checkbox"> 
           <input id="cb" type="checkbox"> 
           I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information) 
          </label> 

          <button type="submit" class="pure-button pure-button-primary">Submit</button> 
         </div> 
        </fieldset> 
       </form>

任何幫助將非常感激。謝謝。

來源

2013-09-11 Tim Aych

這是一個簡單的方法。可能還有其他人。

<input id="cb" type="checkbox" style="float: left; margin-top: 5px;>"> 
<div style="margin-left: 25px;"> 
    I'm interested in an enhanced listing or premium profile, 
    (a member of our team will respond promptly with further information) 
</div>

我用一個div來「阻止」結構文本並將其移動到右邊。 input上的float: left將複選框保留在文本的左側（不在上方）。 input上的margin-top調整了文本的頂部對齊方式。

The fiddle。

來源

2013-09-11 01:09:04 lurker

試着將複選框左移，然後用「overflow：hidden;」將文本包裝在div中。也許另外，添加一些填充，就像我在下面所做的那樣，從複選框中給文本一些喘息的空間（填充是可選的）。

<div class="pure-controls"> 
    <label for="cb" class="pure-checkbox"> 
    <input id="cb" type="checkbox" style="float: left;"> 
     <div style="overflow: hidden; padding: 0px 0px 0px 5px;"> 
      I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information) 
     </div> 
</label> 
    <button type="submit" class="pure-button pure-button-primary">Submit</button> 
</div>

來源

2013-09-11 01:09:45 apex

這是我用過的方法。它比我在SO上找到的許多其他方法更適合我。

LABEL.indented-checkbox-text 
 
{ 
 
    margin-left: 2em; 
 
    display: block; 
 
    position: relative; 
 
    margin-top: -1.4em; /* make this margin match whatever your line-height is */ 
 
    line-height: 1.4em; /* can be set here, or elsewehere */ 
 
}

<input id="myinput" type="checkbox" /> 
 
<label for="myinput" class="indented-checkbox-text">I have reviewed the business information and documentation above, and assert that the information and documentation shown is current and accurate.</label>

來源

2018-01-25 13:40:32

對齊複選框旁邊的文本

回答

相關問題