Question

我在切换（导航触发器）旁边添加了文本“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 ＆gt; nav-trigger＆lt;

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

Answer 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浮动到图像上，然后您就可以根据需要定位文本。

Answer 2

因为内联标记有空格，您可以在它们之间添加，例如

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

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

2 个答案: