teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

追加の質問、ブラウザ上でのコード表示追加

2018/04/25 05:18

投稿

S.niranira
S.niranira

スコア19

title CHANGED
File without changes
body CHANGED
@@ -1,8 +1,8 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
3
  お世話になっております。
4
- ヘッダー部分の要素の並びを画像(2)のようにしたいのですが、どうやっても画像(1)の形にしかなりません。
4
+ ~~ヘッダー部分の要素の並びを画像(2)のようにしたいのですが、どうやっても画像(1)の形にしかなりません。
5
- どのようにすればよいのでしょうか…。
5
+ どのようにすればよいのでしょうか…。~~
6
6
 
7
7
  (1)
8
8
  ![イメージ説明](a57cf4d622042a63adce65c7a78f739d.png)
@@ -10,8 +10,14 @@
10
10
  (2)
11
11
  ![イメージ説明](c892a4c8c0e315afb2e352d1b225b86a.png)
12
12
 
13
+ 上記の配置につきましては解決したのですが、画像(3)のようにログインユーザがメニューボタンよりも上側に表示されてしまっているのを揃えることはできますでしょうか…
14
+
15
+ (3)
16
+ ![イメージ説明](53422fc02c71a2a6cc04ffed2bf14b8c.png)
17
+
13
18
  ### 該当のソースコード
14
19
 
20
+ Eclipse上
15
21
  ```html
16
22
  <div id="main_menu" class="container-fluid sticky-top" style="background:#999">
17
23
  <%@ include file="./common/logo.jsp" %>
@@ -19,6 +25,18 @@
19
25
  <a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a>
20
26
  </div>
21
27
  ```
28
+
29
+ ブラウザ上
30
+ ```html
31
+ <div id="main_menu" class="container-fluid sticky-top" style="background:#999">
32
+ <div id="logo">
33
+ <div id="logo_font1">XXXXXXXXXXXX</div>
34
+ </div>
35
+
36
+ <a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a>
37
+ <span class="navbar-text navbar-right-custm">管理者 A でログイン中</span>
38
+ </div>
39
+ ```
22
40
  ```css
23
41
  /* ログイン者表示 */
24
42
  .navbar-right-custm {