css - 方形空间中导航栏的填充

标签 css padding navbar squarespace

我正在构建一个带有方形空间的网站,但顶部导航栏与同一行上的 Logo /主标题距离太远时遇到了一些问题。

所以这个想法缩小了导航栏和 Logo 之间的差距(假设​​从左上角和右上角填充 30%) squarespace

我发现这里要使用的 css 但我不太确定要使用哪个“id”

.navbar-nav > li{
  padding-left:30%;
  padding-right:30%;
}

来自检查员,我有点困惑,非常感谢您的帮助!

这里的网站链接可以看到代码:https://handa-cheng-a3wm.squarespace.com/1starrondissement

和代码:

<div class="Header-inner Header-inner--top" data-nc-group="top">
  <div data-nc-container="top-left">
    <nav class="Header-nav Header-nav--primary sqs-frontend-overlay-editor-widget-host" data-nc-element="primary-nav" data-content-field="navigation" id="yui_3_17_2_3_1466525273564_799">
      <div class="Header-nav-inner" id="yui_3_17_2_3_1466525273564_2568">
        <a href="/see-paris/" class="Header-nav-item">看巴黎</a><a href="/listen-paris/" class="Header-nav-item" id="yui_3_17_2_3_1466525273564_2567">听巴黎</a>
      </div>
    </nav>
  </div>
  <div data-nc-container="top-center">
    <a href="/" class="Header-branding sqs-frontend-overlay-editor-widget-host" data-nc-element="branding" data-content-field="site-title">巴黎,Paris</a>
  </div>
  <div data-nc-container="top-right">
    <nav class="Header-nav Header-nav--secondary sqs-frontend-overlay-editor-widget-host" data-nc-element="secondary-nav" data-content-field="navigation" id="yui_3_17_2_3_1466525273564_811">
      <div class="Header-nav-inner">
        <a href="/about-us/" class="Header-nav-item">我们是谁?</a><a href="/contact-us/" class="Header-nav-item">联系我们</a>
      </div>
    </nav>
  </div>
</div>

最佳答案

将以下 CSS 添加到 CSS Editor会做你想做的事。

.Header-nav--primary {
  margin-left: auto;
  margin-right: 5%;
}

.Header-nav--secondary {
  margin-right: auto;
  margin-left: 5%;
}

您当然可以根据需要调整 5%

有关 flex + margin here 的更多信息.

关于css - 方形空间中导航栏的填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37949831/

相关文章:

css - 定义 Blogger 模板设计器变量

html - 图片以 chrome 和 firefox 为中心,但不是 safari

javascript - 水平显示表格

具有标记约束的 CSS 定位(边距/填充)

swift - 更改 iOS 中 TableviewCell 的左右填充

c# - 没有背景颜色的控制台文本填充

javascript - 粘性导航辅助

twitter-bootstrap - Bootstrap 3 导航栏折叠

css - 如何居中 Bootstrap 导航栏?

jquery - 防止 jquery mobile 改变链接的行为