Question

在我的Wordpress儿童主题（TwentyTwelve）中，我正在创建一个带有菜单，搜索表单和社交链接菜单的栏。我有问题要正确对齐它们直到我找到解决方案。我在css中显示一个表行，然后是三个单元格（也在css中）。代码如下所示：

#table-row{
display: table-row;
line-height: 44px;
text-align: right;  
}

#menubar{
display: table-cell;
padding-left: 40px;
}
#search-container {
display: table-cell;
}
#menu-social-wrapper{
display: table-cell;
}

标记看起来像这样：

<div id="navigation-container" class="navigation-container">
            <nav id="site-navigation" class="main-navigation" role="navigation">

                <div id="table-row">
                    <div id="menubar">
                        <button class="menu-toggle"><?php _e( '<i class="fa fa-bars"></i>', 'twentytwelve' ); ?></button>
                        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
                        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>                    
                    </div>

                    <div id="search-container" class="search-box-wrapper clear">
                        <div id="searchbox" class="search-box clear">
                            <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Widget Area')) : endif;?>
                        </div>
                    </div> 

                    <div id="menu-social-wrapper" class="menu-social-wrapper">
                        <?php get_template_part( 'menu', 'social' ); ?>
                    </div>
                </div>    

            </nav><!-- #site-navigation -->
        </div>

这给了我这个好结果：

enter image description here 但是当屏幕较小（在这种情况下为400像素）时，我得到了错误的结果：

enter image description here

我想要实现的目标是：

+------------------------------+
|  Search bar                  |
+------------------------------+
|  Social Icons menu           |
+------------------------------+
|  Menu (toggles, bar icon)    |
+------------------------------+

我现在尝试了几天，但我还没有找到解决方案。

请帮帮我。注意：我是一个新手，所以尽量保持简单。

Answer 1

一如既往......当我发布问题时，答案即将来临。在Awashi的评论之前，我发现了它。确实，媒体查询是答案的一部分，然后改变css 显示：表格行和display:table-cell到display:block。

不得不在边距和填充方面做一些工作，但现在它看起来很棒。

这个问题又出现了，但我确信我可以解决它。

enter image description here

无论如何，感谢评论。

Answer 2

我会避免在执行您的操作时使用表行和表格单元格值。您的部分页面的布局和内容不是表格，因此使用display：block或display：inline-block会更合适。内联块元素可以作为内联内容（文本对齐）对齐，您可以给它们宽度（例如33％）。

如果您希望窄屏幕在一列中显示div，请使用媒体查询。

响应栏有三个div

2 个答案: