Question

好的，所以承认在这方面是全新的。我是一名设计师，首先是通过拆除预先构建的模板并研究它们来学习如何编码。

我想要做的是 - 有一个短文本行（左浮动），一个居中的徽标（其宽度/高度可能会在最终确定时有所不同），以及一个文本导航（右浮动）。我正在修改一个主题。

这就是我所拥有的：

 <header id="header" class="wrapper<?php if (get_option($prefix.'_width') == "width_full") { ?>_full<?php } ?>">

    <div class="header_top clearfix">
        <div id="logo" class="left_float">
            <a class="logotype" href="index.php"><img src="<?php echo get_option($prefix.'_logo', 'images/logo.png'); ?>" alt="Logotype"></a>  
        </div>

        <?php  if(function_exists('wp_nav_menu')) : ?>  
            <?php 

            wp_nav_menu(  
                array(  
                    'theme_location'  => 'primary-menu', 
                    'container'       => 'nav',                     
                    'container_id'    => 'nav',  
                    'container_class' => 'right_float',  
                    'menu_class'      => '', 
                    'menu_id'         => '' ,
                    'walker' => new custom_menu_output()
                ));  
            ?>  
        <?php else: ?>  
            <nav id="nav" class="right_float">  
                <ul>  
                    <?php wp_list_pages('title_li=&depth=0'); ?>  
                </ul>  
            </nav>  
        <?php endif; ?> 

    </div>

下面是CSS。我试图将.left_float与.center类作为测试进行交换，但它最终会向下推导航。

.left_float { 
    float: left; 
    }

.center {
    display: block;
    margin-left: auto;
    margin-right: auto }


 .right_float { 
     float: right; 
     }

很长的帖子 - 对不起！任何帮助将不胜感激 - 甚至一些链接，我可以阅读和学习，并自己开始。

非常感谢！

Answer 1

第1部分：首先，代码中没有<div>个类center。首先，将{{1>}和left_float right_float标记之间的所有代码放入其自己的<div>标记中。我假设你想要这样的东西：

<div class="center">...</div>

您会注意到我添加了<header id="header" class="wrapper<?php if (get_option($prefix.'_width') == "width_full") { ?>_full<?php } ?>"> <div class="header_top clearfix"> <div id="logo" class="left_float"> <a class="logotype" href="index.php"><img src="<?php echo get_option($prefix.'_logo', 'images/logo.png'); ?>" alt="Logotype"></a> </div> <div class="center"> <?php if(function_exists('wp_nav_menu')) : ?> <?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => 'nav', 'container_id' => 'nav', 'container_class' => 'right_float', 'menu_class' => '', 'menu_id' => '' , 'walker' => new custom_menu_output() )); ?> <?php else: ?> </div> <nav id="nav" class="right_float"> <ul> <?php wp_list_pages('title_li=&depth=0'); ?> </ul> </nav> <?php endif; ?> </div> <br clear="all" />并添加了<div class="center">...</div>（这对下一部分很重要......）

第2部分：将您的CSS更改为：

<br clear="all" />

但请确保在代码中保留新的.left_float, .center, .right_float { float: left; }！最后，您可以将所有<br clear="all" />向左浮动，它们将彼此相邻。从那里，您可以将每个div的宽度修改为您想要的任何内容！

嗯，我希望有帮助，
Hope4You

Answer 2

你的wp_nav_menu没有任何div。封闭在一个div中，只为所有三个class=lfloat添加一个类div。

`.lfloat{
float: left;
}`

在div中对齐标题元素（text / logo / nav）

2 个答案: