Question

我正在尝试制作两个带有每个标题的列表。

我需要将这两个列表放在一起，每个列表上面都有一个标题，我尝试使用float:left，但它不起作用。

.list ul  
{
    
    float:left;
    list-style:none;
    
}

  <div class="list">
            <h1>Practices</h1>
            <ul>
                <li>Antitrust</li>
                <li>Appellate</li>
                <li>Copyright</li>
                <li>International Patent</li>
                <li>International Disputes</li>
                <li>Litigation & Arbitration</li>
            </ul>
            <h1>Industries</h1>
            <ul>
                <li>Agriculture & Energy</li>
                <li>Computer & Technology</li>
                <li>Environmental</li>
                <li>Life Sciences</li>
                <li>Medical Device</li>
            </ul>
        </div>

Answer 1

您可以将<h1>和<ul>打包到<div>，并将float:left;属性设置为此元素。

然后将.list元素设置为具有vertical-align:top;属性。

.list
{  
    vertical-align:top;
}

.list ul  
{
    list-style:none;
}

.list .ul-wrapper  
{
    float:left;
}

<div class="list">
    <div class="ul-wrapper">
        <h1>Practices</h1>
        <ul>
            <li>Antitrust</li>
            <li>Appellate</li>
            <li>Copyright</li>
            <li>International Patent</li>
            <li>International Disputes</li>
            <li>Litigation & Arbitration</li>
        </ul>
    </div>
    <div class="ul-wrapper">
        <h1>Industries</h1>
        <ul>
            <li>Agriculture & Energy</li>
            <li>Computer & Technology</li>
            <li>Environmental</li>
            <li>Life Sciences</li>
            <li>Medical Device</li>
        </ul>
    </div>
</div>

Answer 2

先生，先生：

<style>
    .ul-wrapper{float:left;}
</style>    
<div class="list">
    <div class="ul-wrapper">
        <h1>Practices</h1>
        <ul>
            <li>Antitrust</li>
            <li>Appellate</li>
            <li>Copyright</li>
            <li>International Patent</li>
            <li>International Disputes</li>
            <li>Litigation & Arbitration</li>
        </ul>
    </div>
    <div class="ul-wrapper">
        <h1>Industries</h1>
        <ul>
            <li>Agriculture & Energy</li>
            <li>Computer & Technology</li>
            <li>Environmental</li>
            <li>Life Sciences</li>
            <li>Medical Device</li>
        </ul>
    </div>
</div>

将ul列表放在一起

2 个答案: