无法在切换旁边获取文本以正确排列答案

【问题标题】：Can't get text next to toggle to line up properly无法在切换旁边获取文本以正确排列
【发布时间】：2013-12-16 01:24:26
【问题描述】：

我在切换（导航触发器）旁边添加了文本“MENY”，因为我认为桌面访问者在访问我的网站时会感到困惑。但是，我似乎无法让文本与切换图标很好地对齐。如何降低或提高图标旁边的文字使其看起来不错？

这是.php：

<a href="#" id="nav-trigger">
<span style="font-family: Source Sans Pro; font-size: 16px; line-height: 1; margin-left: 5px; font-weight: 700;">MENY</span> m

问题图片可以在这里找到：[a link]http://i41.tinypic.com/2jd3l9k.png（没有足够的代表来添加图片）

另外，如果有办法让他们更紧密地联系在一起......但这只是一个奖励！

感谢大家的帮助！我是一个尝试学习的初学者。 :)

整个 header.php >导航触发器

    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

    <?php thb_body_start(); ?>

    <div id="page">

        <?php thb_header_before(); ?>

        <header id="header">
            <?php thb_header_start(); ?>

            <div class="header-container">

                <div class="wrapper">
                    <?php
                        $logo = thb_get_option('main_logo');
                        $logo_2x = thb_get_option('main_logo_retina');

                        if( !empty($logo['id']) && !empty($logo_2x['id']) ) : ?>
                        <?php $logo_metadata = wp_get_attachment_metadata($logo['id']); ?>
                        <style>
                            @media all and (-webkit-min-device-pixel-ratio: 1.5) {
                                #logo {
                                    background-image: url('<?php echo thb_image_get_size($logo_2x['id'], 'full'); ?>');
                                    background-size: <?php echo $logo_metadata['width']; ?>px, <?php echo $logo_metadata['height']; ?>px;
                                }

                                #logo img { visibility: hidden; }
                            }
                        </style>

                        <?php endif;
                    ?>
                    <h1 id="logo">
                        <a href="<?php echo home_url(); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
                            <?php if( isset($logo['id']) && $logo['id'] != '' ) : ?>
                                <img src="<?php echo thb_image_get_size($logo['id'], 'full'); ?>" alt="">
                            <?php else : ?>
                                <?php bloginfo( 'name' ); ?>
                            <?php endif; ?>
                        </a>
                    </h1>

                    <?php thb_nav_before(); ?>

                    <a href="#" id="nav-trigger">
<span style="font-family: Source Sans Pro; font-size: 16px; line-height: 1; margin-left: 5px; font-weight: 700;">MENY</span> m

                    <div class="nav-wrapper">
                        <nav id="main-nav" class="main-navigation primary">
                            <?php thb_nav_start(); ?>

                            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

                            <?php thb_nav_end(); ?>
                        </nav>

                        <nav id="mobile-nav" class="main-navigation primary">
                            <?php thb_nav_start(); ?>

                            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

                            <?php thb_nav_end(); ?>
                        </nav>
                    </div>
                    <?php thb_nav_after(); ?>
                </div>
            </div>

            <div class="wrapper">

【问题讨论】：

解决了。只需要添加一些行高和垂直对齐。 Safari 是罪魁祸首。所以那里看起来还是有点奇怪，但所有其他主要浏览器看起来都很好，所以不能被它打扰......无论如何谢谢！

标签： php css navigation wordpress-theming

【解决方案1】：

创建一个包含图像的 div。创建一个包含文本的 div。

<div class='myimage'><img src='yourimg'></div>
<div class='menytext'>meny</div>

.menytext{float:left;margin:0 0 0 -50px} (for example)

将文本 div 浮动到图像上，然后您就可以随意放置文本。

【讨论】：

谢谢！但切换图标是字体字符，而不是内联或背景图像。
同理。将其浮动在 div 中，设置适合的样式。
再次感谢。不知道我做错了什么，但我一直在搞砸！如果您想向我展示或指导我应该去哪里上课，请添加完整的 header.php。非常感谢！

【解决方案2】：

因为inline标签有空格，所以可以在它们之间加上，比如

<a href="#" id="nav-trigger"><!--
--><span style="font-family: Source Sans Pro; font-size: 16px; line-height: 1; margin-left: 5px;   font-weight: 700;">MENY</span>

【讨论】：