headerのメニューを改行なしにしたい

前提

初心者です。教えていただきたいです。

JSPでCSSをあてる段階でユーザー名とログアウトボタンが改行されてしまいheaderメニューから見切れてしまっています。
CSSの修正箇所を教えてください。

実現したいこと

改行なしで、日報管理システム　従業員管理　日報管理　他の従業員　○○さん　ログアウト
の様にで表示させたいです。

画面

該当のソースコード

JSP
1<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
2<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
3<%@ page import="constants.ForwardConst" %>
4<%@ page import="constants.AttributeConst" %>
5
6<c:set var="actTop" value="${ForwardConst.ACT_TOP.getValue()}" />
7<c:set var="actEmp" value="${ForwardConst.ACT_EMP.getValue()}" />
8<c:set var="actRep" value="${ForwardConst.ACT_REP.getValue()}" />
9<c:set var="actAuth" value="${ForwardConst.ACT_AUTH.getValue()}" />
10<c:set var="commIdx" value="${ForwardConst.CMD_INDEX.getValue()}" />
11<c:set var="commOut" value="${ForwardConst.CMD_LOGOUT.getValue()}" />
12<c:set var="commOtherEmp" value="${ForwardConst.CMD_OTHER_EMPLOYEE.getValue()}" />
13
14<!DOCTYPE html>
15<html lang="ja">
16<head>
17<meta charset="UTF-8">
18    <title><c:out value="日報管理システム" /></title>
19    <link rel="stylesheet" href="<c:url value='/css/reset.css' />">
20    <link rel="stylesheet" href="<c:url value='/css/style.css' />">
21</head>
22<body>
23    <div id="wrapper">
24        <div id="header">
25            <div id="header_menu">
26                <h1><a href="<c:url value='/?action=${actTop}&command=${commIdx}' />">日報管理システム</a></h1>&nbsp;&nbsp;&nbsp;
27                <c:if test="${sessionScope.login_employee != null}">
28                    <c:if test="${sessionScope.login_employee.adminFlag == AttributeConst.ROLE_ADMIN.getIntegerValue()}">
29                        <a href="<c:url value='?action=${actEmp}&command=${commIdx}' />">従業員管理</a>&nbsp;
30                    </c:if>
31                    <a href="<c:url value='?action=${actRep}&command=${commIdx}' />">日報管理</a>&nbsp;
32
33                    <!-- 他の従業員一覧画面へ遷移 -->
34                    <a href="<c:url value='?action=${actEmp}&command=${commOtherEmp}' />">他の従業員</a>&nbsp;
35
36                </c:if>
37
38            <c:if test="${sessionScope.login_employee != null}">
39                <div id="employee_name">
40                    <c:out value="${sessionScope.login_employee.name}" />
41                    &nbsp;さん&nbsp;&nbsp;&nbsp;
42                    <a href="<c:url value='?action=${actAuth}&command=${commOut}' />">ログアウト</a>
43                </div>
44            </c:if>
45            </div>
46        </div>
47        <div id="content">${param.content}</div>
48        <div id="footer">by Shunsuke Nakazono.</div>
49    </div>
50</body>
51</html>

CSS
1@CHARSET "UTF-8";
2
3body {
4    color: #333333;
5    font-family: "Hiragino Kaku Gothic Pro", Meiryo, "MS PGothic", Helvetica,
6        Arial, sans-serif;
7}
8
9#header {
10    width: 100%;
11    height: 70px;
12    background-color: #333333;
13}
14
15#content {
16    width: 100%;
17    margin-top: 15px;
18    padding-left: 3%;
19}
20#div {
21    display: none !important;
22}
23
24h1 {
25    font-size: 24px;
26    display: inline;
27}
28
29h2 {
30    font-size: 36px;
31    margin-bottom: 15px;
32}
33
34li {
35    margin-top: 10px;
36    margin-bottom: 10px;
37}
38
39p {
40    margin-top: 15px;
41    margin-bottom: 15px;
42    white-space: nowrap;
43}
44
45a {
46    text-decoration: none;
47    color: #24738e;
48}
49
50table, tr, th, td {
51    border: 1px solid #cccccc;
52}
53
54table {
55    width: 100%;
56    table-layout: fixed;
57}
58
59th {
60    width: 26%;
61    padding: 10px 2%;
62}
63
64td {
65    width: 66%;
66    padding: 10px 2%;
67}
68
69button {
70    font-size: 14px;
71    padding: 5px 10px;
72}
73
74#footer {
75    text-align: center;
76}
77
78#flush_success {
79    width: 100%;
80    padding-top: 28px;
81    padding-left: 2%;
82    padding-bottom: 28px;
83    margin-bottom: 15px;
84    color: #155724;
85    background-color: #d4edda;
86}
87
88#flush_error {
89    width: 100%;
90    padding-top: 28px;
91    padding-left: 2%;
92    padding-bottom: 28px;
93    margin-bottom: 15px;
94    color: #721c24;
95    background-color: #f8d7da;
96}
97
98table#user_list th {
99    width: 30%;
100    padding: 10px 2%;
101}
102
103table#user_list td {
104    width: 29%;
105    padding: 10px 2%;
106}
107
108tr.row1 {
109    background-color: #f2f2f2;
110}
111
112tr.row0 {
113    background-color: #ffffff;
114}
115
116select {
117    height: 30px;
118}
119
120#header_menu {
121    width: 57%;
122    padding-top: 17px;
123    padding-left: 3%;
124    display: inline-block;
125    white-space: nowrap;
126}
127
128#user_name {
129    color: #cccccc;
130    width: 36%;
131    padding-right: 3%;
132    text-align: right;
133    display: inline-block;
134}
135
136#employee_name {
137    text-align: right;
138    white-space: nowrap;
139}
140
141#header a {
142    color: #eeeeee;
143    white-space: nowrap;
144}
145
146h1 a {
147    color: #eeeeee;
148}
149
150table#memo_list th {
151    font-weight: bold;
152    padding: 10px 2%;
153}
154
155table#memo_list .memo_name {
156    width: 20%;
157    padding: 10px 2%;
158}
159
160table#memo_list .memo_date {
161    width: 20%;
162}
163
164table#memo_list .memo_title {
165    width: 37%;
166}
167
168table#report_list .report_ation {
169    width: 13%;
170}
171
172table#memo_list th {
173    font-weight: bold;
174    padding: 10px 2%;
175}
176
177table#memo_list .memo_name {
178    width: 20%;
179    padding: 10px 2%;
180}
181
182table#memo_list memo_date {
183    width: 20%;
184}
185
186table#memo_list .memo_title {
187    width: 37%;
188}
189
190table#memo_list .memo_action {
191    width: 13%;
192}
193
194pre {
195    font-family: "Hiragino Kaku Gothic Pro",Meiryo,"MS PGothic",Helvetica,Arial,sans-serif;
196}
197
198h3 {
199    font-size: larger;
200}
201
202

試したこと

white-space: nowrap;の追加

行動規範の内容に同意します

回答1件

ベストアンサー

ブロック要素（それ自身で一行となる）とインライン要素（並べることが可能）の区別がついていない様です。
※ブロック要素とインライン要素は古い概念で廃止されてるのですが、説明にはこちらの方が都合が良いので使用しております。

aタグはインライン要素、divはブロック要素です。なのでdivで囲んだ「ログイン」だけが改行されてしまうのかと。
divではなくspanに変更してみてください。

java
1<c:if test="${sessionScope.login_employee != null}">
2                <div id="employee_name">
3                    <c:out value="${sessionScope.login_employee.name}" />
4                    &nbsp;さん&nbsp;&nbsp;&nbsp;
5                    <a href="<c:url value='?action=${actAuth}&command=${commOut}' />">ログアウト</a>
6                </div>
7            </c:if>

↓修正

jsp
1<c:if test="${sessionScope.login_employee != null}">
2                <span id="employee_name">
3                    <c:out value="${sessionScope.login_employee.name}" />
4                    &nbsp;さん&nbsp;&nbsp;&nbsp;
5                    <a href="<c:url value='?action=${actAuth}&command=${commOut}' />">ログアウト</a>
6                </span>
7            </c:if>

投稿2022/12/21 07:12