リストの中の文字を二行にしたい

 <li>
    <a>
       <span class="titleja">トップページ</span>
        <span class="titleEn">HOME</span>
     </a>
 </li>
コード

トップページとHOMEを横並びではなく縦２列にしたいのです。
密接させたいにですがbrタグを使うとトップページとHOMEが離れてしまいます。
どうすればいいでしょうか？
補足でhttps://haniwaman.com/sample/part3/template_08/index.html
このサイトを模写しています。

m.ts10806

2020/06/10 13:24 編集

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 あと、やりたいことを確実に伝えるため、図示してください。また、自身が調べたこと試したことを記載してください。

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

回答1件

ベストアンサー

こんばんは。
html内はこのままで問題はないのですが、
この後に、cssでhtmlを実装していく必要があります。
そのためにそれぞれにclassが付けられています。

css
1.navi {
2	position:absolute;
3	bottom:0px;
4	left:0px;
5	border:solid 1px #6CC6C4;
6	height:70px;
7	width:919px;
8	line-height:70px;
9	-moz-border-radius:6px;
10	-webkit-border-radius:6px;
11	border-radius:6px;
12}
13
14.navi ul {
15	list-style:none;
16	margin:0;
17	padding:0;
18	height:70px;
19}
20
21.navi ul li{
22	list-style:none;
23	margin:0;
24	padding:0;
25	float:left;
26	height:70px;
27}
28
29.navi ul li a{
30	text-decoration:none;
31	padding:17px 0px 18px;
32	width:182px;
33	display:block;
34}
35
36.navi ul li a .titleJa {
37	display:block;
38	height:20px;
39	line-height:20px;
40	text-align:center;
41	font-size:108%;
42	font-weight:bold;
43}
44
45.navi ul li a .titleEn {
46	display:block;
47	height:15px;
48	line-height:15px;
49	text-align:center;
50	font-size:77%;
51	font-weight:bold;
52}