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

我在切换（导航触发器）旁边添加了文本"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

问题图片可在此处找到：[链接]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">

创建一个包含图像的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浮动在图像上，然后您就可以随心所欲地定位文本了。

因为内联标签有一个空格，所以可以在它们之间添加，比如

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

相关内容

最新更新

热门标签：