时间戳

首页 > 解决方案 > 图像和跨度在同一行？

html - 图像和跨度在同一行？

问题描述

我做了 2 个跨度，一个带有文本，一个带有图像，但它们不在同一行。有人有帮助吗？

HTML

.übersicht{
    font-size: x-large;
    text-align: left;
}

.bild{
    text-align: right;
}
<span class="überschrift">
    <h1>Übersicht</h1>
    <ul>
        <li>(Sir) Timothy John Berners-Lee</li>
        <li>Geboren am 8. Juni 1955 in London</li>
        <li>Britischer Physiker & Informatiker</li>
        <li>Begründer des World Wide Web</li>
        <li>Erfinder von HTML</li>
    </ul>
</span>
<span class="bild">
    <img src="bernerslee.png" alt="Dieses Bild ist nicht verfügbar." />
</span>

标签： htmlcss

解决方案

您可以将跨度包装在 div 中并在 css 下添加：

.übersicht {
  font-size: x-large;
  text-align: left;
}

.bild {
  text-align: right;
}

.display-flex {
  display: flex;
}
<div class="display-flex">
  <span class="überschrift">
      <h1>Übersicht</h1>
      <ul>
          <li>(Sir) Timothy John Berners-Lee</li>
          <li>Geboren am 8. Juni 1955 in London</li>
          <li>Britischer Physiker & Informatiker</li>
          <li>Begründer des World Wide Web</li>
          <li>Erfinder von HTML</li>
      </ul>
  </span>
  <span class="bild">
      <img src="bernerslee.png" alt="Dieses Bild ist nicht verfügbar." />
  </span>
</div>

推荐阅读