html - 水平列表格式 - 将 ul 与图像分开

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 .

我怎样才能“分解”图像，使文本保持居中(或顶部)对齐，图像在右边；同时还让每个 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> s 在你的 li 的末尾元素，因为它们是不必要的。我强烈建议阅读 Flexbox因为它完全符合您的要求。