CSS - 在图像右侧显示文本

Question

我有以下 fiddle :http://jsfiddle.net/q60r6ewq/

ul {
  list-style-type: none;
}
.list-actions {
  display: inline-block;
  margin-right: 10px;
}

<h1>My Website</h1>
<ul class='articles-list'>
  <li class='article-title'>
    <a href="/articles/13-image-article">Image Article</a>
  </li>
  <li class='article-date'>
    <em>By Website Writer - 9/19/2014</em>
  </li>
  <li class='list-actions'>
    <img alt="3613 1274343580 1280x1024 most beautiful space" 
         src="http://www.ehdwalls.com/plog-content/thumbs/1280x1024/space/small/3613-1274343580_1280x1024_most-beautiful-space.jpg"
    />
  </li>
  <li class='list-actions'>
    <p>
      I am trying to upload an image. Let's see if it works.
      Do you like this green square?
      I thought it would be a nice picture to upload.
      It's colorful, among other things.
      <a href="/articles/13-image-article"> Read More</a>
    </p>
  </li>
  <li class="list-actions">
    <a href="/articles/13-image-article/edit">Edit</a>
  </li>
  <li class="list-actions">
    <a data-method="delete" href="/articles/13-image-article" rel="nofollow">
      Delete
    </a>
  </li>
</ul>

在我的页面中，文字显示在图片下方

Image
Text

我希望文本与图像的右侧对齐

Image  Text

我认为在列表操作类上调用 display: inline-block 可以解决这个问题，但我想不是。

Answer 1

您必须设置图像和描述宽度。检查这个:http://jsfiddle.net/q60r6ewq/30/

此外，必须垂直对齐。这就是为什么我建议您删除“display:inline-block”并仅添加“float:left”(这会自动将显示更改为 block)。您还必须设置段落“margin:0”:http://jsfiddle.net/q60r6ewq/32/

        ul {
            list-style-type: none;
            overflow:hidden;
        }

        .list-actions {
            float:left;
            margin-right: 10px;
        }
        .image {
            width:100px;
        }
        .description{
            width:250px;
        }
        .description p{
            margin:0;
        }
        .actionLink{
            float:left;
            margin-right:5px;
        }

<ul class = 'articles-list'>


    <li class = 'article-title'><a href="/articles/13-image-article">Image Article</a></li>
    <li class = 'article-date'><em>By Website Writer - 9/19/2014</em></li>
    <li class = 'list-actions image'><img alt="3613 1274343580 1280x1024 most beautiful space" src="http://www.ehdwalls.com/plog-content/thumbs/1280x1024/space/small/3613-1274343580_1280x1024_most-beautiful-space.jpg" /></li>
    <li class = 'list-actions description'>
        <p>I am trying to upload an image. Let's see if it works. Do you like this green square? I thought it would be a nice picture to upload. It's colorful, among other things.
            <a href="/articles/13-image-article"> Read More</a><br>
            <a class="actionLink" href="/articles/13-image-article/edit">Edit</a>
            <a class="actionLink" data-method="delete" href="/articles/13-image-article" rel="nofollow">Delete</a>
    </p></li>


</ul>