1

HTML 是

<div class="jfmfs-friend-container">
    <div class="jfmfs-friend  ">
        <input class="friend-checkbox" type="checkbox">
        <img src="/picture">
        <div class="friend-name">Test User</div>
    </div>
</div>

在这里，我能够checkbox, img and friend-name div在一行中实现所有三个元素。我正在寻找以下内容：

  1. 复选框和朋友名称在 img 的垂直中间。
  2. 朋友名称 div 中的自动换行
  3. 所有元素之间的距离相等（至少 5px）。现在所有3个都彼此相邻，没有空间

这是我的CSS。我正在为任何 display:block 属性的父 div 提供 css 代码：

.jfmfs-friend div {
    color:#111111;
    font-size:11px;
    overflow:hidden;
    display:inline-block;
}

div.friend-name  {
    margin-left: 10px;
    vertical-align: middle;
    word-wrap: break-word;
}

.friend-checkbox {
    position: relative;
    vertical-align:middle;
    display: inline-block;
}

#jfmfs-friend-container {
    overflow:scroll;
    overflow-x: hidden;
    -ms-overflow-x: hidden;
    width:100%;
    height:400px;  
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    color: #333;
    font-size: 12px;
}
4

2 回答 2

2

演示：http: //jsfiddle.net/55twK/

  1. 设置vertical-align:middle为所有三个元素，现在你错过了 img。
  2. 现在所有三个元素都像内联元素一样工作，如果有更多的文本 div 可以将自己换行到新行。因此，其中一个选项是为 div 设置宽度或最大宽度。
  3. 水平边距和内边距适用于内联元素。
于 2013-01-14T23:24:34.620 回答
0

要将元素居中在“jfmfs-friend” div 中，您需要添加以下 css：

div.jfmfs-friend  {
    text-align: center;
}

要在您的“朋友名称”中自动换行，您需要设置宽度。目前它将扩展到其父级的大小。设置“friend-name”潜水的宽度或其父容器之一将导致文本在遇到元素边缘时中断。

为了使您的元素彼此分离，您需要使用填充和边距 css 属性，直到获得所需的效果。为每个元素添加 5px 的填充可能会满足您的要求。

.friend-checkbox, img, .friend-name {
     padding: 5px;
}

您可以使用jsfiddle.net来调整布局并获得实时预览。这将帮助您获得所需的间距。

此外，请查看有关padding和margin属性的这些参考。

于 2013-01-14T23:29:05.050 回答