why display:inline-block not working same?

Question

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

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

the html code is all same except there are some characters between <a href="#" class="btn-menu"></a>. I want to kown why the result is not same when there are some characters
between <a href="#" class="btn-menu"></a>.it's so stranger!,i think for a long time ,but i can't find the reason.

which characters do you see? – Fabrizio Calderan Mar 01 '16 at 08:54 — Fabrizio Calderan, Mar 01 '16 at 08:54

score 1 · Answer 1 · answered Mar 01 '16 at 09:01

do you want to display buttons in one row? try this to Put buttons in one row

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

The OPs question was **"Why"** this isn't working the same. – Aaron Mar 01 '16 at 09:04 — Aaron, Mar 01 '16 at 09:04

why display:inline-block not working same?

1 Answers1