Question

这是jsfiddle链接，请看看

html似乎有问题。

CSS

.taro{
  display: inline;
  margin-left: 200px;
}

我还在学习CSS所以请耐心等待我。

我想获得这个结果 https://www.dropbox.com/s/lq80rkc4w5fqpki/Screenshot%202014-11-21%2017.36.51.png?dl=0

Answer 1

默认设置或设置display:inline的商品不受边距影响。

我认为您需要的是display:inline-block

JSfiddle Demo

这可能很有用LearnLayout.com

Answer 2

您的html包含多个无效标记：

您应该为img使用自我结束标记，即以/>代替>
您应该使用<br />代替<br>

我还会考虑更改代码的嵌套，以便spans不包含br标记，因为它可以更容易地跟踪和设置样式。

最后，如果您想将所有文字显示在图片右侧，请将display: inline更改为display: inline-block（jsfiddle）

<ul class="list-group">
  <li class="list-group-item">
    <img src="http://placepic.me/profiles/80-80" width="40" height="40" class="img-circle" />
    <p class="taro">
      <strong>
        <b>Crondeau Viner, MD</b>
        <label>
          Nov 5th , 2014
        </label>
      </strong>
      <br />Note
      <br /> 
      <span>hello Dr Jacqueline test - nov 5  </span>    
      <br />
    </p>
  </li>
</ul>

你的CSS将成为

.taro{
  display: inline-block;
  margin-left: 200px;
}

Answer 3

希望这是你想要的http://jsfiddle.net/89f5o3jL/2/

<强> CSS

.list-group {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.list-group-item {
    overflow: auto;
    padding-top: 15px;
}
.img-circle {
    float: left;
    margin-right: 20px;
    border-radius: 30px;
}
.info {
    float: left;
    width: 500px;
    border-bottom: #ccc 1px solid;
    padding: 0 0 15px 0;
}
.label {
    background: #5390fc;
    color: #fff;
    border-radius: 4px;
    display: inline-block;
    padding: 2px 7px;
    margin: 10px 0;
}

<强> HTML

<ul class="list-group">
    <li class="list-group-item">
        <img src="http://placepic.me/profiles/60-60" width="60" height="60" class="img-circle">
        <div class="info">
            <strong>
                Crondeau Viner, MD
                <span>Nov 5th , 2014</span>
            </strong>
            <br />
            <span class="label">Note</span>
            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum.</p>
        </div>
    </li>
</ul>

CSS - 为什么我不能内联所有内容？

3 个答案: