Question

我想知道是否有人能帮助我解决我遇到的一个小的html / css问题。基本上，我正在尝试使用不同的图像为每个列表项的项目创建一个无序列表，并在同一行的右侧显示文本。更具体地说，顶行的标题和下面的一些普通文本。目前，我可以将图像和文本放在同一行:-(这是我的代码。

非常感谢任何帮助。

HTML：

<ul>
    <li class="service-list">
        <a href=""><img src="image.png" alt="icon" class="alignnone size-full wp-image-156" /></a>
        <h3>Header</h3>
        <p>
        text goes here
        </P>
    </li>
....
</ul>

CSS：

.service-list {
    list-style-type: none;
    margin-left:0px;
    padding-left:0px;
    float: left;
    display: inline-block;
}


.service-list p {
    text-align: right; 
    margin: 0; 
    padding: 0;
}

Answer 1

使用

时

显示：内联块;

不要使用

浮动：左;

尝试

.service-list {
list-style-type: none;
margin-left:0px;
padding-left:0px;
display: inline-block;
}

.service-list img
{
float:left;
}

.service-list p,.service-list h3 {
text-align: right; 
display:inline-block;
padding: 0;
}

以下是Link to Fiddle

Answer 2

我劝阻“tabluar aproach”。表格适用于表格。请改用<div>。

我只需转动块元素中的<a>，然后将内容包装在<div>和 float 中。

<强> HTML：

<ul id="services-list">
<li>
  <a href="http://www.google.com" class="image">
    <img src="http://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-24.png" alt="Facebook Icon" />
  </a>
  <div class="content">
    <h3>Header</h3>
    <p>text goes here</p>
  </div>
</li>
<li>
  <a href="http://www.google.com" class="image">
    <img src="http://cdn1.iconfinder.com/data/icons/socialmediaicons_v120/24/facebook.png" alt="Facebook Icon" />
  </a>
  <div class="content">
  <h3>Header</h3>
  <p>text goes here</p>
  </div>
</li>
</ul>

<强> CSS：

/*a little bit of reset*/
#services-list, #services-list p, #services-list h3 {
list-style: none;
margin:0; padding:0;
}

#services-list > li{
  float:left;
  margin-right: 20px;
  width: 130px;
}

#services-list > li > .image{
  display:block;
  float:left;
  margin-right:10px;
}

/*
this instructions are to force the dimensions of image and its container <a>
*/
#services-list > li > .image,
#services-list > li > .image > img{
  width:24px; height:24px;
}

以下是可编辑的代码：http://codepen.io/andreacanton/pen/lykDA

注意：浏览器无法正确计算<ul>的高度，因为包含浮动元素。因此，您应该添加一些 clear:both <div> 或强制<ul>元素的高度。

将文本和图像放在列表项中的同一行 - html / css

2 个答案: