htmlについて

質問

cssで以下のように書くと形が添付画像のように崩れてしまいます。
どこが作用しているのでしょうか？
他に必要な箇所があれば教えてください。すぐ用意します。
ilは5回出力しています。
.article-tag li{
text-align: center;
display: inline-block;
}
.article-tag a{
font-weight: bold;/*太字に*/
font-size:16px;
text-decoration: none;/*下線消す*/
background: skyblue;/*背景を水色に*/
padding:3% 0;
color:white;/*文字を白に*/
border-radius: 20px;/*角を丸くする*/
font-family: 'Avenir','Arial';/*フォントをいい感じに*/
}

<div class="article"><ul> <li> 14</li><div class="article-tag"> <li> <a href="article">ハンマー</a></li> <li> <a href="article">キャリー依頼</a></li> <li> <a href="article">apex</a></li> <li> <a href="article.php">フォートナイト</a></li> <li> <a href="article">ハンマー#キャリー依頼#apex#フォートナイト</a></li></li></div>

この投稿のマルチメディアは削除されているためご覧いただけません。

回答No.3

4017B · ベストアンサー

一応、作法に則って書けばこんな感じですかね…？

<div class="mylist">
<ul>
<li>14</li>
<li class="mytag">
<ul>
<li><a href="article">ハンマー</a></li>
<li><a href="article">キャリー依頼</a></li>
<li><a href="article">apex</a></li>
<li><a href="article.php">フォートナイト</a></li>
<li><a href="article">ハンマー#キャリー依頼#apex#フォートナイト</a></li>
</ul>
</li>
</ul>
</div>

.mylist li {
margin: 0; padding: 0;
display: inline-block;
text-align: center;
}
.mytag li {
list-style-type: none;
}
.mylist .mytag a {
margin: 0; padding: 0.25em 0.5em;
text-decoration: none;
background: #adf;
border-radius: 20px;
color: #fff;
font: bold 16px/100% 'Avenir','Arial', sans-serif;
}

P.S.
HTML5に準拠するのならば、<ul> <ol> の中のには <li> しか入れられません。しかしながら <li>～</li> の中であれば何を記述してもOKとなっています。

PC上から見る分にはコレで構わないと思いますが、画面幅が狭いスマホなどから閲覧する場合には再度、表示崩れ問題が再発かと思います。

お礼

ありがとうございます。

回答No.2

celtis

この質問の続きでしょうか？
https://okwave.jp/qa/q9868514.html

この質問に貼られているコードでは、上記のような折り返しは発生しませんでした。
しかしaタグの左右パディングに1%でも余白が入ると、折り返しが発生しています。
ちなみに%ではなくpx単位の指定なら、折り返しは発生しませんでした。

この質問に貼られていない他のCSSが影響しているのかもしれません。

お礼

ありがとうございます。

探してみます。

回答No.1

ngwaver

添付画像が無いので崩れはわかりませんが、

HTMLについては最後の部分は誤りではないでしょうか。
</a></li></li></div>
↓
</a></li></ul></div>