0

我正在尝试编写一个选择，如 Facebook“邀请朋友”选择。我喜欢它，因为它使用默认复选框，而不是模拟每个项目的选择的背景。

问题是我无法弄清楚如果需要（文本太大）他们如何使文本（朋友的名字）分成两行！

我有一个我想要实现的简化示例。这是HTML：

<div class="modal">
  <div class="modal-body">
    <ul class="unstyled">
      <li class="store_selectable">
        <input class="checkbox" type="checkbox">
        <a href="#">
        <div class="store-text">
          <div class="iblock"><img alt="Missing" src="http://placehold.it/30x30"></div>
          <div class="text"><div>This is the store</div></div>
        </div>
      </a>
    </li>
  </ul>

​​​

这是CSS：

body {
    padding: 20px;
}

li.store_selectable {
    width:161px;
    float:left;
    margin:0 0px 6px 0px;
    overflow:hidden;
    font-size:0.9em;
}

li.store_selectable .checkbox {
    float:left;
    display:inline-block;
    margin:12px 6px 0;
}

li.store_selectable .store-text {
    display:block;
    height:30px;
}

li.store_selectable img {
    float:left;
    display:block;
    width:30px;
    height:30px
}

li.store_selectable a {
    display:block;text-decoration:none;
    padding:2px;
    outline:none;
    color:#333;
    border:1px solid #fff;
    border-width:1px 0;
}

li.store_selectable a:hover {
    background:cyan;
    border:1px solid blue;
    border-width:1px 0;
}

li.store_selectable .iblock {
    display:inline-block;
    vertical-align:middle;
    overflow:hidden;
    text-align:left;
}

为了更容易测试和理解，我在这里创建了一个 jsfiddle：http: //jsfiddle.net/rikas/tpqHd/1/

现在，如果列表项的宽度足够小，我正在尝试将文本分成两行，更改这一行width:161px;：与facebook“邀请朋友”模式窗口CSS混淆我可以看到他们做到了，但我做不到！

谢谢你的帮助！

4

1 回答 1

0

不太确定您要实现的界面，但文本不换行的原因是 css

     overflow:hidden;

删除后考虑将您的复选框和文本放在其自己的 div 元素与类 .fl

    .fl { display:block; }

将它们并排排列

在两者的正下方创建另一个空的 div 元素，其类为 .clear

    .clear { display:block; clear:both; line-height:0; }

防止下一个元素继承 float:left

于 2012-05-18T17:56:34.550 回答