Horizontal list formatting - separate ul from image

问题

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):

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">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;
}

But it turns out like this.

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?

Edit: 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, I tried doing this as a table, but was recommended to use a list instead}

回答1:

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.

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;
}

Then repeat this for all your sections.

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.

来源：https://stackoverflow.com/questions/48553878/horizontal-list-formatting-separate-ul-from-image

标签

html

css

html-lists