ヘッダー部分における要素をうまく並べられない

Question

前提・実現したいこと

お世話になっております。
ヘッダー部分の要素の並びを画像(２)のようにしたいのですが、どうやっても画像(１)の形にしかなりません。
どのようにすればよいのでしょうか…。

(１)

(２)

上記の配置につきましては解決したのですが、画像(３)のようにログインユーザがメニューボタンよりも上側に表示されてしまっているのを揃えることはできますでしょうか…

(３)

該当のソースコード

Eclipse上

		<div id="main_menu" class="container-fluid sticky-top" style="background:#999">
			<%@ include file="./common/logo.jsp" %>
			<p class="navbar-text navbar-right-custm">管理者 Ａ でログイン中</p>
			<a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a>
		</div>

ブラウザ上

<div id="main_menu" class="container-fluid sticky-top" style="background:#999">
	<div id="logo">
		<div id="logo_font1">XXXXXXXXXXXX</div>
	</div>

	<a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a>
	<span class="navbar-text navbar-right-custm">管理者 Ａ でログイン中</span>
</div>

/* ログイン者表示 */
.navbar-right-custm {
	float: right;
	display: inline-block;
}

/* メニューボタン */
#panel-btn{
  float: right;
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  margin: 20px 0 10px;
  border-radius: 50%;
  background: #fff;
}

Comments

[m.ts10806]

Bootstrap はどのバージョンをお使いでしょうか。

[S.niranira]

ver. 3.3.7 を使用しています。

[m.ts10806]

また、jspの読み込みが入ったコードはどのようにHTML出力されているのでしょうか？ブラウザで表示した際のコードを提示されたほうが良いかと思います。

Answer 1

複数の.navbar-rightには問題があることが分かっています。
https://getbootstrap.com/docs/3.3/components/#navbar-component-alignment

簡単に解決するには右寄せするものをまとめてしまえばいいです。

<div id="main_menu" class="container-fluid sticky-top" style="background:#999">
    <div id="logo">
        <div id="logo_font1">XXXXXXXXXXXX</div>
    </div>
    <div class="navbar-text navbar-right">
        <span>管理者 Ａ でログイン中</span>
        <a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a>
    </div>
</div>

#main_menu > .navbar-right > * {
  vertical-align: middle;
}

/* メニューボタン */
#panel-btn {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
}

Comments

[S.niranira]

ありがとうございます。
うまくいきました！！

Answer 2

<a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a>

<p class="navbar-text navbar-right-custm">管理者 Ａ でログイン中</p>

逆にすればいいのではないでしょうか？

Comments

[S.niranira]

ご回答ありがとうございます。
要素の記述位置を入れ替えたら順番は想定通りになりました。
ただ、入れ替わった要素の縦位置を揃えたい場合はどのようにすればよろしいでしょうか。
(状況につきましては質問内容を編集させていただきます。)

[DaisukeMori]

そこはCSSで調整してあげればいいのではないかと。

例として
(２)のようにセンター揃えしたいのならmarginの数値を変えてあげれば
いくらでも思うような調整が効きます。
margin: 20px 0 10px;
↓
#panel-btn{
/*中略*/
margin: 10px 0 10px;
/*中略*/
}

[S.niranira]

ありがとうございました。
細かく調整することで対応しようと思いましたが、もう一方の方法で今回はうまくいきましたので、そちらを採用させていただきました、
別の部分で必要になりましたらDaisukeMori様の方法を試したいと思います。