水平列表格式-将ul与图像分开 [英] Horizontal list formatting - separate ul from image

问题描述

我正在尝试格式化水平列表，以便图像位于ul的左侧.这是我要达到的目标的想法(绿色是图像，如果有用，x，y，z标签将有助于引用每个部分的部分):

I'm trying to get a horizontal list formatted so the image is on the left side of the ul. Here's an idea of what I'm aiming for (green is the image, the x,y,z labels are to help refer to portions of each part if it helps):

但是我似乎无法弄清楚如何使我的图像与ul的文本部分分开".

But I can't seem to figure out how to keep my image 'separate' from the text part of the 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">[e-mail]</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">[e-mail]</p></li><br>
            <li><p id="phoneNumber">[phone] 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">[e-mail]</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">[e-mail]</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">[e-mail]</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">[e-mail]</p></li><br>
            <li><p id="phoneNumber">[phone]</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">[e-mail]</p></li><br>
            <li><p id="phoneNumber">[phone]</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;
}

但是事实证明像这样.

我如何分解"图像，使文本保持居中(或顶部)对齐，图像在右侧；同时也使每个<​​c0>的边框都更紧?

How could I 'break apart' the image, so the text stays center (or top) aligned, with the image to the right; while also having the border be tighter around each ul?

我是html/css的新手，所以如果有更好的格式化方法，请告诉我.在下面，有人提到使用列表来执行此操作...因此，以上是我的尝试，但很可能我没有想到其他更好的方法.

I'm new to html/css, so if there's a better way to format this generally, please let me know. Per below, it was mentioned to use a list to do this ...so the above is my attempt but it's likely I'm not thinking of something else that'd be better.

_{FWIW，我尝试将其作为表格进行操作，但是建议改用列表}

推荐答案

如果您真的坚持使用语义，这是我可以在代码中进行最少更改的解决方案.

If you really insist on using your semantics, this is the solution I can come up with with the least possible changes in your code.

<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">[e-mail]</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;
}

然后在您的所有部分重复此操作.

Then repeat this for all your sections.

侧面说明:我也删除了li元素末尾的<br>，因为它们是不必要的.我强烈建议您阅读 Flexbox ，因为它确实可以你想要什么.

Side note: I also removed the <br>s at the end of your li elements because they're unnecessary. I highly suggest reading up on Flexbox because it does exactly what you want.

这篇关于水平列表格式-将ul与图像分开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！