html - 在 iOS/Safari 上并排显示元素的 CSS 失败

Question

我不太擅长 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 中):

那我错过了什么？

Answer 1

这是代码。希望它能帮助你。如果有任何变化，请告诉我。

.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>