如何重新创建水平显示细节的页脚

Posted 2023-03-21

【中文标题】如何重新创建水平显示细节的页脚

【英文标题】：How do I recreate a footer that shows details horizontally

【发布时间】：2021-11-29 07:34:58

【问题描述】：

我正在尝试重新创建我的 html 的页脚部分，以便下面的详细信息将按照下面的图片显示在我的网站上。 enter image description here

   <div class="footer-details">
        <h1>Hours<h1>
        <ul>
          <li><span>Monday-Friday</span></li>
          <li>9:00 AM - 5:00 PM</li>
          <li><span>Saturday</span></li>
          <li>10:00 AM - 4:00 PM</li>
          <li><span>Sunday</span></li>
       <li>Closed</li>
        </ul>
      </div>
      <div class="footer-details">
        <h1>Social</h1>
        <div class="social-links">
       <a href="https://www.instagram.com/?hl=en"><img class="social-logo" src="/Assets/Icons/icon-instagram.png"  /></a>
       <a href="https://en-gb.facebook.com/"><img class="social-logo" src="/Assets/Icons/icon-facebook.png"  /></a>
       <a href="https://twitter.com/?lang=en-gb"><img class="social-logo" src="/Assets/Icons/icon-twitter.png"  /></a>
     </div>
      </div>
    </div>
  </div>

【问题讨论】：

请更新您的问题，添加您的代码。

我已经添加了代码，请帮忙

您的链接无效。你能解决这个问题吗？

@seymurium 链接到什么图片？例如，我添加了一个新图像。

【参考方案1】：

首先，将您的日期和时间段对包含在一个li 标记中。像这样：

<li>
   <div>Monday-Friday</div>
   <div>9:00 AM - 5:00 PM</div>
</li>
<li>
   <div>Saturday</div>
   <div>10:00 AM - 4:00 PM</div>
</li>

然后将display: flex 赋予页脚本身、ul 标记和带有social-links 类的div 元素。

【讨论】：

我认为这是要走的路，我会将此链接添加到flexbox guide 以防万一。