Question

我要求删除表的使用并将代码替换为HTML列表（<ul>和<li>）。要替换的HTML代码如下所示

<table>  
     <tr>  
         <td>  
            <img width="40" height="40" src="../images/johnsmith2.jpg" alt="johnsmith2" />  
        </td>  
        <td>  
            <table>  
                <tr><td>John Smith</td></tr>  
                <tr><td>24 years</td></tr>  
                <tr><td>Chicago</td></tr>  
            </table>  
        </td>  
    </tr>  
</table>

使用列表尝试了多个选项但无法实现此显示。右侧的文本总是使用列表在图像下方，我希望垂直文本列表（名称，然后是年龄，然后是城市）与图像相邻，即列表应该生成与上表生成的形状相同的形状。 / p>

请告诉我如何通过带有HTML列表的CSS来完成此操作。

Answer 1

有很多这方面的教程。继续谷歌搜索或尝试w3schools.com。

或者可以检查一下： http://www.javascriptkit.com/script/script2/verticalmenu.shtml

Answer 2

你可以试试这样的事情

<style>
.profile li{
    float: right;
    clear: right;
}
.profile .image{
    float: left;
    clear: none;
}
</style>
<ul class="profile">
    <li class="image"><img width="40" height="40" src="../images/johnsmith2.jpg" alt="johnsmith2" /></li>
    <li>John Smith</li>
    <li>24 years</li>
    <li>Chicago</li>
</ul>

Answer 3

为此，您可以使用display：table属性。写得像这样：

<强> CSS

.profile > li{
    display:table-cell;
}

.profile{
    display:table;
}

<强> HTML

<ul class="profile">
    <li><img width="40" height="40" src="../images/johnsmith2.jpg" alt="johnsmith2" /></li>
    <li>
        <ul>
            <li>John Smith</li>
            <li>24 years</li>
            <li>Chicago</li>
        </ul>
    </li>
</ul>

选中此http://jsfiddle.net/GCfSx/1/

Answer 4

以下是jsFiddle的示例，其中包含您所需的解决方案......

http://jsfiddle.net/ZHbxr/16/

您需要标记parent <ul> display as table和inner <li> display as table-cell

用无序列表替换表

4 个答案: