0

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

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

这是我所拥有的：

 <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; 
     }

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

非常感谢！

4

2 回答 2

0

你wp_nav_menu没有任何 div。Enclose 带有一个 div 并仅class=lfloat向所有三个divs 添加一个类。

`.lfloat{
float: left;
}`
于 2012-06-27T19:06:45.857 回答
0

第 1 部分：首先，您的代码中没有<div>with 类center。首先将and标记之间的所有代码放入它自己的标记中。我假设你想要类似的东西：left_floatright_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>和添加<br clear="all" />（这对下一部分很重要......）

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

.left_float, .center, .right_float { 
    float: left; 
}

但请确保<br clear="all" />在代码中保留新的！最后，您可以将所有 s 浮动div到左侧，并且它们都将彼此相邻。从那里，您可以将每个 s 的宽度修改为div您想要的任何内容！

好吧，我希望这会有所帮助，
Hope4You

于 2012-06-27T00:24:40.627 回答