Question

我试图获取格式化的水平列表，以便图像位于ul的左侧。我想知道我的目标是什么（绿色是图像，x，y，z标签是为了帮助引用每个部分的部分如果它有帮助）：

但我似乎无法弄清楚如何保持我的形象与众不同。来自ul。

的文字部分

HTML：

<span class='row'>
    <ul class = 'top-ul'>

        <ul id="menu">
            <li><h2><u>Colby Abbott</u></h2></li><br>
            <li><p id="email">Enos.Goyette@hotmail.com</p></li><br>
            <li><p id="phoneNumber">360.751.0915</p></li>
            <li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
        </ul>

        <ul id="menu">
            <li><h2><u>Jamaal Powlowski</u></h2></li><br>
            <li><p id="email">Stan.Roberts48@gmail.com</p></li><br>
            <li><p id="phoneNumber">(057) 629-2042 x2604</p></li>
            <li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
        </ul>

        <ul id="menu">
            <li><h2><u>Ubaldo Bode</u></h2></li><br>
            <li><p id="email">Alia.Lynch52@gmail.com</p></li><br>
            <li><p id="phoneNumber">881.886.7822 x87177</p></li>
            <li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
        </ul>

        <ul id="menu">
            <li><h2><u>Herbert Bailey</u></h2></li><br>
            <li><p id="email">Arnaldo73@gmail.com</p></li><br>
            <li><p id="phoneNumber">1-620-830-6732</p></li>
            <li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
        </ul>

    </ul>
    <br>
</span>
<span class='row'>
    <ul>
        <ul id="menu">
            <li><h2><u>Alana Legros</u></h2></li><br>
            <li><p id="email">John.Nienow37@hotmail.com</p></li><br>
            <li><p id="phoneNumber">299.276.2872 x90430</p></li>
            <li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
        </ul>

        <ul id="menu">
            <li><h2><u>Gertrude Jacobs</u></h2></li><br>
            <li><p id="email">Erna_Krajcik94@gmail.com</p></li><br>
            <li><p id="phoneNumber">(335) 097-2437</p></li>
            <li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
        </ul>

        <ul id="menu">
            <li><h2><u>Ellis Homenick</u></h2></li><br>
            <li><p id="email">Ezra_Stamm76@yahoo.com</p></li><br>
            <li><p id="phoneNumber">(391) 333-5140</p></li>
            <li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
        </ul>
    </ul>
</span>

CSS：

ul {
    width:100%;
    table-layout: fixed;
}

ul ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: inline-block;
    table-layout: fixed;
    border: 3px red solid;
    width:20%;
}


li img{ /* I want to move this to the right of the ul it's in somehow */
    display: inline;
    border: 3px solid green;
}


p {
    margin:0px;
    padding-left: 10px;
}

.row{
    width: 100%;
}

.row li{
    display:inline-block;
}

但事实证明like this。

我怎么能分开＆＃39;图像，因此文本保持中心（或顶部）对齐，图像向右;同时每个ul周围的边界也要紧张？

编辑：我是html / css的新手，所以如果有更好的格式化方法，请告诉我。根据下面的内容，有人提到使用列表来做到这一点......所以上面是我的尝试，但我可能不会想到其他更好的东西。

_{FWIW，我尝试将其作为表格进行，但是was recommended to use a list instead}

Answer 1

如果你真的坚持使用你的语义，这是我能用你的代码中尽可能少的变化来提出的解决方案。

HTML

<ul class="menu"> #change id to class
    <li> #placed all the info you want on the left to a single li element
      <h2><u>Colby Abbott</u></h2>
      <p id="email">Enos.Goyette@hotmail.com</p>
      <p id="phoneNumber">360.751.0915</p>
    </li>
    <li> #right side
      <img src=https://i.imgur.com/9ZC02Oss.jpg >
    </li>
</ul>

CSS

ul.menu {
  border: 3px red solid;
  width: 400px;
}

ul.menu li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  float:left;
}


ul.menu li img{
  display: inline;
  border: 3px solid green;
  float: right;
  width: 100px;
}

然后对所有部分重复此操作。

附注：我还删除了<br>元素末尾的li，因为它们不必要。我强烈建议您阅读Flexbox，因为它完全符合您的要求。

水平列表格式 - 从图像中分离ul

1 个答案:

HTML

CSS