column-count　で二列を揃える方法

column-count　で二列にすると崩れてしまう

リストで説明したいものがあるのですが、column-countを使用して２列にしたところ
添付の写真のように、二列目が上に上がってしまい、ズレてしまいます。

発生している問題・エラーメッセージ

![イ

htmlソースコード

<dl class="list06_black">
<dt>薬剤・商材費用例</dt>
<dd>
<ul>
<li>カップ</li>
<li>ハケ</li>
<li>マドラー</li>
<li>デジタルスケール</li>
</ul>
<p>etc…</p>
</dd>
</dl>

cssソースコード

.list05_black {
    width: fit-content;
    min-width: 100%;
    border: 1px solid #ddd;
    margin: 33px 0;
    padding: 0 30px 25px 30px;
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.list05_black dt {
    display: inline-block;
    background: #fff;
    padding: 0 10px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .055em;
    position: relative;
    top: -12px;
    left: -12px;
}

.list05_black dd {
    position: relative;
    margin-top: 0;
    padding: 0;
    margin-left: 0;
    font-weight: 600;
    column-count: 2;
}

.list05_black ul {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
    margin-bottom: 10px;
}

.list05_black ul>li {
    display: list-item;
    text-align: -webkit-match-parent;
    position: relative;
    padding: 0 0 0 15px;
    font-weight: 600;
}

.list05_black li {
    margin: 10px 0 0;
    border-bottom: dashed 1px #ddd;
    font-size: 15px;
    line-height: 25px;
}

.list05_black ul>li:before {
    display: block;
    content: '';
    position: absolute;
    top: 10px;
    left: 1px;
    width: 6px;
    height: 6px;
    background: #181818;
    border-radius: 50%;
    border-style: solid;
    border-width: 0;
}

.list05_black p {
    text-align: right;
    margin: 0px !important;
}

.list05_black span {
    margin: 0px !important;
    letter-spacing: normal;
    /*    font-size: 12px;*/
    /*    font-weight: 500;*/
}

    .list05_black {
        width: 100%;
    }
    .list05_black li {
        font-size: 13px;
        line-height: 1.5em;
    }
    .list05_black ul>li:before {
        top: 6px;
    }

html CSS

Lhankor_Mhy

2021/12/15 08:25

ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1

cn4433

2021/12/15 08:31

ソースコード記載いたしました。申し訳ございません。

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

回答1件

ベストアンサー

参考
https://stackoverflow.com/questions/38020462/css-columns-and-margin-issue

CSS
1.list05_black dd {
2    position: relative;
3    margin-top: 0;
4    padding: 0;
5    margin-left: 0;
6    font-weight: 600;
7  
8}
9
10.list05_black ul {
11    list-style-type: none;
12    padding-left: 0;
13    margin-left: 0;
14    margin-bottom: 10px;
15    column-count: 2;
16}
17
18.list05_black ul>li {
19    display:inline-block;
20    width:95%;
21    text-align: -webkit-match-parent;
22    position: relative;
23    padding: 0 0 0 15px;
24    font-weight: 600;
25  
26}