Question

我几乎以我想要的方式拥有社交媒体图标。我遇到的问题是，当我希望图标水平时，它们显示为垂直。在代码中添加浮动文本后，图标立即从水平变为垂直。我不知道如何在不取出想要保留的浮动文本的情况下再次使它们水平。我计划在小部件选项的自定义html选项中，在我的wordpress网站的页脚中使用此代码。

我在图像中添加了浮动文本后，图标便从水平变为垂直。我无法弄清楚如何保持图像水平，并且我不想摆脱浮动文本。

如何水平排列图像？

<center>

  <div title="twitter">
    <a href="" target="_blank"><img src="https://cdn1.imggmi.com/uploads/2019/6/19/eb71c669616b73376b4046d59aa72acd-full.jpg" border="0" / alt="twitter_" src="https://ibb.co/hXDMqVP" width="85" height="85">
  </div>
  </a>

  <div title="patreon">
    <a href="" target="_blank"><img src="https://cdn1.imggmi.com/uploads/2019/6/19/7c336d8d73312b913f3cb0d3d29f924f-full.jpg" border="0" / border="0" alt="patreon" src="https://ibb.co/hXDMqVP" width="100" height="100">
  </div>
  </a>

  <div title="ko-fi">
    <a href="" target="_blank"><img src="https://cdn1.imggmi.com/uploads/2019/6/19/afe4f098fcf4ce4781aa0a0bea7c5f5d-full.jpg" border="0" / alt="ko-fi" src="https://ibb.co/hXDMqVP" width="100" height="100">
  </div>
  </a>

</center>

Answer 1

center标记已过时。用div包裹起来并将其设置为弯曲

.icon-container {
  display: flex;
  justify-content: space-between;
}

<div class="icon-container">
  <div title="twitter">
    <a href="" target="_blank"><img src="https://cdn1.imggmi.com/uploads/2019/6/19/eb71c669616b73376b4046d59aa72acd-full.jpg" border="0" / alt="twitter_" src="https://ibb.co/hXDMqVP" width="85" height="85">
  </div>
  </a>


  <div title="patreon">
    <a href="" target="_blank"><img src="https://cdn1.imggmi.com/uploads/2019/6/19/7c336d8d73312b913f3cb0d3d29f924f-full.jpg" border="0" / border="0" alt="patreon" src="https://ibb.co/hXDMqVP" width="100" height="100">
  </div>
  </a>


  <div title="ko-fi">
    <a href="" target="_blank"><img src="https://cdn1.imggmi.com/uploads/2019/6/19/afe4f098fcf4ce4781aa0a0bea7c5f5d-full.jpg" border="0" / alt="ko-fi" src="https://ibb.co/hXDMqVP" width="100" height="100">
  </div>
  </a>

</div>

Answer 2

<div>元素是“ block-level elements”：

默认情况下，块级元素占据其父元素（容器）的整个空间，从而创建一个“块”。 ...浏览器通常在块级元素之前和之后显示换行符。您可以将它们可视化为一堆盒子...块级元素总是从新行开始，并占用可用的全部宽度（尽可能向左和向右伸展））。

一种水平显示项目的基本方法是将title属性直接添加到<a>元素（即“ inline elements”）：

内联元素是仅占据定义该元素的标签所界定的空间，而不破坏内容流的元素……内联元素不在新行上开始，并且仅占用所需的宽度。

这是一个示范：

#container {
  text-align: center;
}

<div id="container">

  <a href="#" target="_blank" title="twitter">
    <img src="" border="0" width="50" height="50">
  </a>

  <a href="#" target="_blank" title="patreon">
    <img src="" border="0" width="50" height="50">
  </a>

  <a href="#" target="_blank" title="ko-fi">
    <img src="" border="0" width="50" height="50">
  </a>

</div>

有关更多信息，请参见CSS Layout - Normal Flow。

上面是一个非常简单的布局。其他更复杂的方法也可能有用，例如，如果您要在屏幕上分配项目并在它们之间留出空间。

请参见CSS Layout Guides。

还要注意，您代码中的HTML似乎格式错误。 <div>和<a>元素未正确嵌套。 <img>元素具有重复的属性和斜杠。而且，正如其他人所提到的，<center>元素已过时。

Answer 3

您可以为每个包含图像的div添加float: left;属性。

社交媒体图标水平放置方向的问题

3 个答案: