Question

我有以下小提琴：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

您可以尝试移动<img>块中的<p></p>标记。请参阅下面的代码段。

此外，您可以制作2 <div>并将<p>拆分为中间。这将允许您执行一些CSS并将所有文本放在右侧的单个列中。

＆＃13;

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

＆＃13;

<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'>
    <p>
      <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" />
    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>

＆＃13;

Answer 2

您必须设置图像＆amp;描述宽度。检查一下：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>

CSS - 显示图像右侧的文本

2 个答案: