gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 15:10:16 25 4
gpt4 key购买 nike

我正在尝试格式化水平列表,以便图像位于 ul 的左侧。这是我的目标的想法(绿色是图像,xyz 标签用于帮助指代部分每个部分(如果有帮助)):

enter image description here

但我似乎无法弄清楚如何将我的图像与 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

最佳答案

如果你真的坚持使用你的语义,这是我可以想出的解决方案,对你的代码进行尽可能少的更改。

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因为它完全符合您的要求。

关于html - 水平列表格式 - 将 ul 与图像分开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48553878/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com