バッジを右寄せにすると縦長になってしまう

Question

現在、monacaを使ってアプリ作成をしております。

monacaのOnsen UI Sliding Menuを使ってメニューの右端にバッジを表示させたところ、下図の画像のPage1のようにバッジの形が縦長になってしまいました。自分が試みたいのはPage2のようなバッジのサイズで右端に表示させることです。なぜこのようなことが起こるのかわからなくて質問をしました。

プログラムを載せておきますので何が悪いのか教えて頂けると幸いです。
よろしくお願いします。

.pull-right {
  float: right;
}

.menu-badge {
   
  padding: 3px 5px;
  font-size: .5em;
  color: white;
  background-color: red;
  border-radius: 3px;

}

<ons-page style="background-color: white">

    <ons-list>

        <ons-list-item id="newsitem"
            modifier="tappable" class="list__item__line-height"
            onclick="app.slidingMenu.setMainPage('page1.html', {closeMenu: true})">
            <i class="fa fa-home fa-lg" style="color: #666"></i>
            &nbsp; Page 1
        </ons-list-item>  
        
         <ons-list-item id="newsitem1"
            modifier="tappable" class="list__item__line-height"
            onclick="app.slidingMenu.setMainPage('page2.html', {closeMenu: true})">
            <i class="fa fa-home fa-lg" style="color: #666"></i>
            &nbsp; Page 2
        </ons-list-item>
        


    </ons-list>

</ons-page>

var app = ons.bootstrap("myApp", ["onsen"]);
        app.controller("homeController", ["$scope", function($scope) {
            ons.ready(function() {
               

 $("#newsitem").append('<span class="menu-badge pull-right">i</span>');
 $("#newsitem1").append('<span class="menu-badge">i</span>');
 
 
    });
        }]);

Comments

[kei344]

pull-rightのCSSを追記ください。

[dododonnn]

すみません。追記し忘れたので修正しました。

Answer 1

右寄せに使っている pull-right のスタイルに display:inline-block が含まれているのではないでしょうか。
通常の <span> はインライン要素なので、line-height 等のライン属性の影響を受ける（font-sizeから導き出される規定の行の高さを持つ）が、display:inline-block 指定されたことにより height が親ブロック要素の値を継承するようになった（親 div 要素の高さに揃えられた）という状態だと思います。

height か margin-top と margin-bottom を明示的に指定して、高さを調整する必要があるのではないでしょうか。

Comments

[tkanda]

質問のほうに追記がありましたね。
float:right の指定は display: inline-blockと同様に、font-sizeから導き出されるインラインの line-height が設定されず、親ブロックのheightがそのまま引き継がれます。行の高さを調節するには、line-height を明示的に指定する必要があります。

[dododonnn]

明確な回答ありがとうございました。
おかげで問題が解決しました。

Answer 2

$("#newsitem").append('<span class="menu-badge pull-right">i</span>');

pull-right にスタイルが当たってしまっているからでしょうね。これはonsen-uiの内部のcssでスタイルが指定されているクラスなのではないでしょうか。

browserのデベロッパーツールなどでスタイルを指定しているファイル名の確認をしてみるといいと思います。

Answer 3

pull-right 削除すれば良いのでは…？
Page１とPage２の差を見ましょう

$("#newsitem").append('<span class="menu-badge pull-right">i</span>');
$("#newsitem1").append('<span class="menu-badge">i</span>');