对齐复选框旁边的文本

简单的问题，无疑是一个简单的解决方案 - 尽管搜索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

对齐复选框旁边的文本

回答

相关问题