Question

我正在为我的wordpress网站编辑一个基础主题，我试图将文本“居中”在他的顶部导航中。所以我试图使用“包含到网格”的样式来使文本居中，但不幸的是，我的顶级资产净值的其余部分变得有些混乱：

我发布了一张图片，但没有声誉

我希望黑色部分延长屏幕的长度，但将文字保留在我在.css中指定的940像素区域。我做错了什么？

.top-bar-js-breakpoint { width: 767px !important; visibility: hidden; }
.contain-to-grid { width: 100%;}
.fixed { width: 100%; left: 0; position: fixed; top: 0; z-index: 99; }
.site-header {border-bottom:1px solid #ddd;padding:1.5rem 0 1rem 0;margin:-1.875em 0    1.875em 0; background-color:#2BA6CB;}
.sidebar ul li {list-style:none;}
.top-bar {height: 45px; line-height: 45px; margin: 0 0 30px; padding: 0; width: 100%; position: relative;}
.contain-to-grid .top-bar { max-width: 940px; margin: 0 auto; }
.top-bar-section ul li>a {border-left:1px solid #333;border-right:none;}
.top-bar-section ul.right li .dropdown{left:auto;right:0}.top-bar-section ul.right li

这是我的wordpress主题的相关部分 `

＆GT;

<div class="contain-to-grid">

<nav class="top-bar">
  <ul class="title-area">
        <li class="name"><h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo('name'); ?></a></h1></li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>
    <section class="top-bar-section">
        <ul id="menu-top" class="right">
        <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'menu_class' => 'left', 'container' => '', 'fallback_cb' => 'foundation_page_menu', 'walker' => new foundation_navigation() ) ); ?>
        </ul>
    </section>
  </nav>

<?php $header =  get_header_textcolor();
if ( $header !== "blank" ) : ?>
<header class="site-header" <?php $header_image = get_header_image(); if ( ! empty( $header_image ) ) : ?> style="background:url('<?php echo esc_url( $header_image ); ?>');" <?php endif; ?>>
    <div class="row">
        <div class="large-12 columns">
            <h2><a style="color:#<?php header_textcolor(); ?>;" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'description' ); ?></a></h2>
        </div>
    </div>
</header>
<?php endif; ?>

`

Zurb Foundations Top-Bar NAV和“包含到网格”的问题

0 个答案: