Question

我使用从ThemeForest购买的Wordpress主题为客户构建网站。 This is the page有问题，它包含以下HTML：

<div class="container header-block">
  <div class="logo">
      <a href="http://test.doig.com.au/meyer/" class="site-logo-link" rel="home"></a>
            <div class="site-description">
                        <h3 class="sitename sitetitle"></h3>
            <p class="tagline"></p>
            </div>
    </div>
  <nav class="nav nav-horizontal"></nav>            
</div>

＆安培; CSS：

.header-left .logo {
    overflow: hidden;
}
.logo {
    padding: 0;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    list-style: none;
}

.header-site .nav {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.3rem;
}
.header-site nav {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-align-items: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    line-height: 40px;
}
.nav-horizontal {
    display: block !important;
}
.nav {
    vertical-align: middle;
    display: inline-block;
}

我想知道如何将徽标放在div上方，这样就像this website。

我尝试过使用CSS：

.nav-horizontal {
  display: block !important;
}

但这没有用。

你能帮帮忙吗？

Answer 1

如果我收到您的问题，您希望在导航上方显示您的徽标。你可以通过改变你的HTML来实现这一点。

由于您不想在标题中输入导航，因此您可以将其删除。

<div class="container header-block">
  <div class="logo">
    <a href="http://test.doig.com.au/meyer/" class="site-logo-link" rel="home"></a>
    <div class="site-description">
      <h3 class="sitename sitetitle"></h3>
      <p class="tagline"></p>
    </div>
  </div>
</div>

之后，您可以在标题下方再次添加它，将其包装在容器中：

<div class="container">
   <nav class="nav nav-horizontal"></nav>
</div>

完整代码可能如下所示：

 <div class="container header-block">
  <div class="logo">
    <a href="http://test.doig.com.au/meyer/" class="site-logo-link" rel="home"></a>
    <div class="site-description">
      <h3 class="sitename sitetitle"></h3>
      <p class="tagline"></p>
    </div>
  </div>
</div>
<!-- Insert Navigation -->
<div class="container">
   <nav class="nav nav-horizontal"></nav>
</div>

如果不改变过多的css样式表，这将是一个干净的方法。

将<div>放在<nav>元素

1 个答案: