在Squarespace导航栏下方优化营业时间居中布局求助

需求说明 #

我正在使用Squarespace搭建网站，需要实现以下效果：

• 营业时间模块内日期左对齐、时间右对齐
• 营业时间整体在导航栏下方居中显示
• 修复当前移动端显示效果不佳的问题

原代码参考 #

HTML代码

<center>
<div class="contactfield">
<div class="contact">
<div class="date">Mon-Wed</div><div class="time">5PM - 11PM</div> 
<div class="date">Thu</div><div class="time">12PM - 11PM</div> 
<div class="date">Fri-Sat</div><div class="time">12PM - 1AM</div>
  <div class="date">Sun</div><div class="time">12PM - 11PM</div>
  </div></center>
 <center> <span><img class=“sm_icons“ src="https://static1.squarespace.com/static/615e86638bf80f2683975e8f/t/630ff2cac2a9b76708e4df5d/1661989587824/phone.png" width= 12px ></span> <a href="tel:03-8591-3000">03 8591 3000</a>
 <div class="smaller"><a href="mailto:hello@trinitystkilda.com">hello@trinitystkilda.com</a></div>
  </center> 

CSS代码

p.smaller {
    line-height: 0px;
}
p.smaller{
    margin-top:-25px;
}
.navbar{
  text-align:center;
  .header-nav-list{
    width: 100%;
    max-width:800px;
    margin:0 auto;
    justify-content:space-evenly;
  }
}
p.contact {
    line-height: 0px;
}
p.contact{
    margin-top:0px;
 }
.contact .date{
  font-size: 14px;
  width:30%;
  display:inline-block;
  box-sizing:border-box;
  text-align:left;
  }
.contact .time{
  font-size: 14px;
  text-align:right;
  padding-right:10px;
  width:70%;
  display:inline-block;
  box-sizing:border-box;
  }
p.email {
    line-height: 0px;
}
p.email{
    margin-top:5px;
   color: white;
}

优化方案 #

优化后HTML代码

<!-- 统一容器控制整体居中 -->
<div class="header-info-container">
  <!-- 营业时间模块 -->
  <div class="hours-container">
    <div class="hour-row">
      <div class="date">Mon-Wed</div>
      <div class="time">5PM - 11PM</div>
    </div>
    <div class="hour-row">
      <div class="date">Thu</div>
      <div class="time">12PM - 11PM</div>
    </div>
    <div class="hour-row">
      <div class="date">Fri-Sat</div>
      <div class="time">12PM - 1AM</div>
    </div>
    <div class="hour-row">
      <div class="date">Sun</div>
      <div class="time">12PM - 11PM</div>
    </div>
  </div>

  <!-- 联系方式模块 -->
  <div class="contact-info">
    <span><img class="sm_icons" src="https://static1.squarespace.com/static/615e86638bf80f2683975e8f/t/630ff2cac2a9b76708e4df5d/1661989587824/phone.png" width="12px"></span>
    <a href="tel:03-8591-3000">03 8591 3000</a>
    <div class="smaller"><a href="mailto:hello@trinitystkilda.com">hello@trinitystkilda.com</a></div>
  </div>
</div>

优化后CSS代码

/* 全局容器：导航栏下方居中，限制宽度避免过宽 */
.header-info-container {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 15px; /* 移动端左右留白，防止内容贴边 */
}

/* 营业时间容器：限制宽度确保居中紧凑 */
.hours-container {
  display: inline-block;
  text-align: left;
  width: 100%;
  max-width: 400px;
}

/* 单条营业时间：Flex布局实现自动左右对齐 */
.hour-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px; /* 行间距优化，避免拥挤 */
}

/* 日期/时间基础样式 */
.hour-row .date,
.hour-row .time {
  font-size: 14px;
}

.hour-row .date {
  text-align: left;
}

.hour-row .time {
  text-align: right;
}

/* 联系方式模块样式 */
.contact-info {
  margin-top: 10px;
}

.smaller {
  margin-top: 5px;
  line-height: 1.2; /* 修复原代码行高为0导致的文字重叠 */
}

/* 移动端适配：缩小字体、调整内边距 */
@media (max-width: 767px) {
  .hour-row .date,
  .hour-row .time {
    font-size: 13px;
  }
  
  .header-info-container {
    padding: 0 10px;
  }
}

/* 保留原导航栏样式 */
.navbar{
  text-align:center;
}
.navbar .header-nav-list{
  width: 100%;
  max-width:800px;
  margin:0 auto;
  justify-content:space-evenly;
}

关键改动说明 #

1. 结构重构：移除过时的<center>标签，用CSS统一控制居中；给每条营业时间添加单独容器，避免inline-block的排版误差
2. 布局优化：使用Flex布局的justify-content: space-between，精准实现日期左对齐、时间右对齐，替代原代码中固定宽度的inline-block方案
3. 移动端适配：添加媒体查询调整字体大小和内边距，避免内容贴边或拥挤；修复原代码中line-height: 0导致的文字重叠问题
4. 样式精简：删除重复定义的CSS规则，提升代码可读性和优先级，避免被Squarespace默认样式覆盖

内容的提问来源于stack exchange，提问作者Marketing Nikakis