li の要素を横並びにしたい

htmlのli部分を横並びにしたいです。

コードはこんな感じです。

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf=8">
5        <link rel="stylesheet" href="css/styles.css">
6    </head>
7    <body>
8        <header>
9            <title>勉強用サイトpart3</title>
10            <div class="header-topline">
11                <img src="img/header_logo.png">
12                <ul class="ul1">
13            <a href="#"><li>ホーム</li></a>
14            <a href="#"><li>モデルコース</li></a>
15            <a href="#"><li>法人様用</li></a>
16            <a href="#"><li>テヘラン便り</li></a>
17            <a href="#"><li>イランビザのご案内</li></a>
18            <a href="#"><li>海外航空券</li></a>
19            <a href="#"><li>手配</li></a>
20            <a href="#"><li>会社概要</li></a>
21            <a href="#"><li>関連リンク</li></a>
22            <a href="#"><li>お問い合わせ</li></a>
23                </ul>
24            </div>
25        </header>
26    </body>
27</html>

css
1.header-topline{
2    background-color:darkslategray;
3    margin:0;
4    padding:0;
5    color:white;
6    font-size:0.8rem;
7    line-height:26px;
8    height:60px;
9    z-index:10px;
10    position: fixed;
11}
12
13ul{
14    display:inline-block;
15    list-style:none;
16    color:black;
17    position:relative;
18}

m.ts10806

2019/11/12 03:17

すでに明解な回答が複数ついたあとでなんですが、ご自身で調べたこと試したことはあるのでしょうか？あるのでしたら具体的に記載してください。「調べてわからなかったから質問しているのは当たり前」と思うのでしたら、他者がこの質問内容を読んでそこまで汲み取れるか確認してみてください。何も書かれていないと本当に何も調べず試さず丸投げする人との区別は不可能です

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

回答2件

ベストアンサー

CSS
1li {
2  display: inline-block /* または display: inline */
3}

m.ts10806さんがこの回答のコメントでご指摘されているように

aの中にliは構文上NGである

です。
また、titleタグはhead内に入れるようにしてください。
そのためHTMLを以下のように修正してください。

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4    <head>
5        <meta charset="utf=8">
6            <title>勉強用サイトpart3</title>
7        <link rel="stylesheet" href="css/styles.css">
8    </head>
9    <body>
10        <header>
11            <div class="header-topline">
12                <img src="img/header_logo.png">
13                <ul class="ul1">
14            <li><a href="#">ホーム</a></li>
15            <li><a href="#">モデルコース</a></li>
16            <li><a href="#">法人様用</a></li>
17            <li><a href="#">テヘラン便り</a></li>
18            <li><a href="#">イランビザのご案内</a></li>
19            <li><a href="#">海外航空券</a></li>
20            <li><a href="#">手配</a></li>
21            <li><a href="#">会社概要</a></li>
22            <li><a href="#">関連リンク</a></li>
23            <li><a href="#">お問い合わせ</a></li>
24                </ul>
25            </div>
26        </header>
27    </body>
28</html>
29

以下大喜利回答です。

JavaScript
1
2width = 0;
3for(i=0;i<document.getElementsByClassName('header-topline').length;i++){
4  document.getElementsByClassName('header-topline')[i].style.width = '100%';
5  for(j=0;j<document.getElementsByTagName('ul').length;j++){
6    for(k=0;k<document.getElementsByTagName('li').length;k++){
7      document.getElementsByClassName('header-topline')[i].getElementsByTagName('ul')[j].getElementsByTagName('li')[k].style.display = 'inline-block';
8      document.getElementsByClassName('header-topline')[i].getElementsByTagName('ul')[j].getElementsByTagName('li')[k].style.width = document.getElementsByClassName('header-topline')[i].getElementsByTagName('ul')[j].getElementsByTagName('li')[k].clientWidth + 'px';
9      document.getElementsByClassName('header-topline')[i].getElementsByTagName('ul')[j].getElementsByTagName('li')[k].style.position = 'absolute';
10      document.getElementsByClassName('header-topline')[i].getElementsByTagName('ul')[j].getElementsByTagName('li')[k].style.left = 0;
11      document.getElementsByClassName('header-topline')[i].getElementsByTagName('ul')[j].getElementsByTagName('li')[k].style.left = 0;
12      document.getElementsByClassName('header-topline')[i].getElementsByTagName('ul')[j].getElementsByTagName('li')[k].style.left = width + 'px';
13      width += document.getElementsByClassName('header-topline')[i].getElementsByTagName('ul')[j].getElementsByTagName('li')[k].clientWidth;
14    }
15  }
16}
17