Question

我试图让三块物品并排漂浮，但却无法得到它。 This is the web page test我有这样的HTML结构：

<div id="thumb1">
    <ul>
        <li><img src="images/JohnShort200x233.jpg" alt="" width="120" border="0" /></li>
        <li>John Short</li>
        <li>Gynaecologist</li>
    </ul>
</div>

<div id="thumb2">
    <ul>
        <li><img src="images/JohnFrye200x233.jpg" alt="John Frye - General Surgeon" width="120" border="0"></li>
        <li>John Frye</li>
        <li>General Surgeon</li>
    </ul>
</div>

<div id="thumb3">
    <ul>
        <li><img src="images/RichardGearry200x233.jpg" alt="Richard Gearry - Gastroenterologist" width="120" border="0"></li>
        <li>Richard Gearry</li>
        <li>Gastroenterologist</li>
    </ul>
</div>

...并使用以下CSS：

ul {width: 120px;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 650px;
    float: left;}

ul li {width: 120px;
    list-style: none;}

li {list-style: none;
    text-align: center;}

#thumb1 {float: left;}

我需要将每个人的照片，姓名和头衔留在一个街区内 - 旁边的下一个街区。任何帮助将不胜感激。

Answer 1

display:inline-block使用li并删除float:left

 li {
        list-style: none;
        text-align: center;
        display:inline-block
    }

Answer 2

删除

来自width: 650px;的

ul。

ul {
    width: 120px;
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}

Answer 3

如果您还想将文本水平居中对齐，可以使用此..

li {
width: 120px;
list-style: none;
display: inline-block;
vertical-align: middle;
}

Answer 4

根据每个div的当前代码，您可以设置float：left和width 33％

像

您可以添加此款式

div
{
  float: left;
  width: 33%
}

并排浮动3件物品

4 个答案: