我不太擅长 CSS。那......再加上我花了将近一个小时试图实现我可以在一分钟内使用 <table>
完成的事情。 ...但是如今,使用 tables
设置 HTML 样式被认为是坏的。好的。所以我正在努力使用 CSS ...
因此,我们将不胜感激。
我正在尝试显示这个:
所以我的 html 变成了这个(列表中有多个元素):
<ul class="utl">
<li>
<a href="#"><img src="#" class="utlimg"></a>
<a href="#"><h2>HeaderTitleGoesHere</h2></a>
<p>Small description text goes here.</p>
</li>
</ul>
CSS 是:
* {
word-wrap: break-word;
}
.utl{
list-style: none outside none;
padding: 1em 4px 4em 4px;
margin: 10px 0px 30px 0px;
}
.utl li {
padding: 2px 0;
margin: 0.8em 0 1.8em 0;
word-wrap: break-word;
overflow-wrap: break-word;
}
.utl h2{
margin: 0 0 0.4em 0;
padding: 0;
}
.utl p{
margin: 0.4em 0;
padding: 0;
}
.utlimg{
float: left;
margin: 0px 1em 1em 0px;
max-width: 50px;
max-height: 50px;
}
当我在 Chrome 的开发控制台中尝试时,这有点奏效(尽管文本似乎溢出到左侧图像下方):
但是当我将它加载到我的 iPhone 上时,它看起来像这样完全错误(在 Safari 中):
那我错过了什么?
最佳答案
这是代码。希望它能帮助你。如果有任何变化,请告诉我。
.utl li{
display: flex;
list-style-type: none;
}
.right-part{
padding-left: 20px;
}
h2{
margin: 0
}
<ul class="utl">
<li>
<a href="#"><img src="https://dummyimage.com/200x150/000/fff" class="utlimg"></a>
<div class="right-part">
<a href="#"><h2>HeaderTitleGoesHere</h2></a>
<p>Small description text goes here.</p>
</div>
</li>
</ul>
关于html - 在 iOS/Safari 上并排显示元素的 CSS 失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59464790/