<ul>～</ul>が二つ続くと間に改行ができてしまう

質問

<ul>～</ul>について質問です。下記のようなソースがあるとします。

----------------ソース----------------
<h3>あいうえお</h3>
<ul type="aaa">
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
</ul>
<h3>あいうえお</h3>
<ul type="bbb">
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
</ul>
------------------------------------
と書くと、下のように表示されますが、
★★の部分に改行が出来てしまいます。
この改行を出さないようにする方法はないでしょうか？

----------------表示----------------
あいうえお

１．あああ
２．いいい
３．ううう
★★
あいうえお

１．あああ
２．いいい
３．ううう
------------------------------------

回答No.3

yambejp · ベストアンサー

普通に書けばこうかな

<style>
h3{
margin:0px;
}
ul{
margin-top:0px;
margin-bottom:0px;
}
</style>

<h3>あいうえお</h3>
<ul>
<li><span>あああ</span></li>
<li><span>いいい</span></li>
<li><span>ううう</span></li>
</ul>
<h3>あいうえお</h3>
<ul>
<li><span>あああ</span></li>
<li><span>いいい</span></li>
<li><span>ううう</span></li>
</ul>

回答No.2

うぃず（@Wizard_Zero）

★★部分は改行（空行）ではなくマージンです。上にある<ul>と<h3>の両方に上下のマージンがあるため、両方を詰めないとどちらかが生き残ります。

<h3>あいうえお</h3>
<ul type="aaa" style="margin-bottom: 0px;">
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
</ul>
<h3 style="margin-top: 0px">あいうえお</h3>
<ul type="bbb">
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
</ul>

回答No.1

metametamu

動作確認はしていませんがtable-cellとinlineを使えばできると思います。

<div style="display:table;">
<h3 style="display:table-row;">あいうえお</h3>
<ul type="aaa" style="display:table-cell !important;display:inline;">
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
</ul>
<h3 style="display:table-cell !important;display:inline;vertical-align:bottom;">あいうえお</h3>
</div>
<ul type="bbb">
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
</ul>