html – 内嵌块和文本包装与CSS

前端之家收集整理的这篇文章主要介绍了html – 内嵌块和文本包装与CSS前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想显示一个复选框,后面是一些文本,它自带的下面.没有任何CSS的 HTML如下所示:
  1. <input type="checkBox" checked="checked" />
  2. <div>Long text description here</div>

我想要显示类似于:

  1. X Long Text
  2. Description
  3. Here

它目前围绕着这样

  1. X Long Text
  2. Description Here

这对表很容易,但是由于其他原因我需要它在CSS中.我认为显示的组合:inline-block / float:right / clear / spans而不是DIV可以工作,但我迄今没有运气.

解决方法

将复选框和标签包装在容器div(或者,我经常与列表形式)并应用
  1. <div class="checkBox">
  2. <input type="checkBox" id="agree" />
  3. <label for="agree">I agree with checkBox</label>
  4. </div>
  5.  
  6.  
  7.  
  8.  
  9. .checkBox input {
  10. float:left;
  11. display:block;
  12. margin:3px 3px 0 0;
  13. padding:0;
  14. width:13px;
  15. height:13px;
  16. }
  17.  
  18. .checkBox label {
  19. float:left;
  20. display:block;
  21. width:auto;
  22. }

猜你在找的HTML相关文章