Question

在以下编码中，只有在Chrome中显示列表标记时，才会将列表标记置于图像顶部。（浮动对文本有效，它会显示在图像的右侧而没有问题）此外，使用F5刷新时，列表标记将显示在图像的右侧而不会出现问题。为防止列表标记从头开始放在图像上，有人可以告诉我该怎么做？

img {
  float: left;
}

ul li {
  margin-left: 20px;
}

<div>
  <img src="images/sample.jpg" alt="sample" width="50%" />
  <ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
    <li>eee</li>
  </ul>
</div>

更新：当列表变长时，我希望列表包装如下图像。 https://embed.plnkr.co/uo1u4YOQHAWpFEO117QG/

Answer 1

img {
  display: inline-block;
}
ul{
  display: inline-block;
}
ul li {
  margin-left: 20px;
}

<div>
  <img src="images/sample.jpg" alt="sample" width="50%" />
  <ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
    <li>eee</li>
  </ul>
</div>

img {
  display: inline-block;
}
ul{
  display: inline-block;
}

试试这个。

Answer 2

你可以试着像你这样漂浮你的foreach ($request->files as $photo) { $path = Storage::putFile('photos', $photo); ...：

<ul>

那应该浮动一切，ul将始终位于图像的右侧。

Chrome-css img float listmark未显示在正确的位置

2 个答案: