为什么显示:内联块不能正常工作?

时间:2016-03-01 08:54:02

标签: css css3

<?php
    $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;

    $all_active_tasks   = get_posts(array(
    'posts_per_page'    => -1,
    'paged'             => $paged,
    'offset'            => 0,
    'post_status'       => 'publish',
    'author'            => '1',
    'post_type'         => 'post'
    )
);
foreach($all_active_tasks as $post) :
$category = get_the_category();
setup_postdata($post);
?>
<div class="the-post">
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <p><?php echo $category[0]->cat_name; ?></p>
</div>

<?php endforeach; ?>
<?php if (function_exists(custom_pagination)) {
        custom_pagination(count($all_active_tasks),"",$paged);
    }?>
<?php wp_reset_postdata(); ?>

enter image description here

<html>
    <head>
    <style>
        .nav
        {
            height: 45px;
        }
        .btn-return
        {
            display: inline-block;
            width: 43px;
            height: 100%;
            border: 1px solid red;
        }
        .btn-menu
        {
            display: inline-block;
            width: 43px;
            height: 100%;
            border: 1px solid red;
        }
    </style>
    </head>
    <body>
        <div class="nav">
            <a href="#" class="btn-return">return</a>
            <a href="#" class="btn-menu"></a>
        </div>
    </body>
    </html>

enter image description here

除了<html> <head> <style> .nav { height: 45px; } .btn-return { display: inline-block; width: 43px; height: 100%; border: 1px solid red; } .btn-menu { display: inline-block; width: 43px; height: 100%; border: 1px solid red; } </style> </head> <body> <div class="nav"> <a href="#" class="btn-return">return</a> <a href="#" class="btn-menu">problem</a> </div> </body> </html> 之间有一些字符外,html代码完全相同。我想知道为什么当有一些字符时结果不一样  在<a href="#" class="btn-menu"></a>之间。它是如此陌生!我想很长一段时间,但我无法找到原因。

1 个答案:

答案 0 :(得分:1)

你想在一行中显示按钮吗? 尝试将按钮放在一行

<html>
    <head>
    <style>
        .nav
        {
            height: 45px;
        }
        .btn-return
        {
            display: inline;
            width: 43px;
            height: 100%;
            border: 1px solid red;
        }
        .btn-menu
        {
            display: inline;
            width: 43px;
            height: 100%;
            border: 1px solid red;
        }
    </style>
    </head>
    <body>
        <div class="nav">
            <a href="#" class="btn-return">return</a>
            <a href="#" class="btn-menu"></a>
        </div>
    </body>
    </html>