【CSS】<li>の高さを2つ横並びの子要素<div>の高い方に合わせると番号が表示されなくなる

前提・実現したいこと

<li>の子要素に2つの<div>が横並びであり、その一つの<div>の高さの変化に応じて<li>の高さを変えるということがしたいです。現状、これの実現はできているのですが、<li>の数字番号(1~)が消えてしまいます。

原因は、overflow: hidden;でリスト番号部分がブロック外のため見えなくなっているのだと思います。

これの対処もしくはoverflow: hidden;以外の方法があればご教授いただけると嬉しいです。

該当のソースコード

<li class="idea">
  <div class="idea-text">
    <div  class="---" >
      <%= item.text  %>
    </div>
  </div>
  <div class="item-menu-right">
   #aタグ要素等
  </div>
</li>

該当部css

css
1
2.content{
3    background: #FAFAFA;
4
5    .idea{
6        font-size: 12px;
7        font-weight: 500;
8        margin-left: 20px;
9        height: auto;
10        overflow: hidden;
11    }
12
13    .idea-text{
14        float:left;
15        width:80%;
16    }
17
18    .item-menu-right{
19        float:right;
20
21    }
22}

試したこと

overflow: hidden;を設定していないと、

<div class="idea-text">内の要素が長くなり2行に改行されたときに、レイアウトが崩れてしまいます。 overflow: hidden;を設定すると、リスト番号が消えてしまいます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答3件

CSS
1.idea{
2  font-size: 12px;
3  font-weight: 500;
4  margin-left: 20px;
5  height: auto;
6  /*overflow: hidden;*/ ←削除
7}
8.idea::after {
9  content: "";
10  display: block;
11  clear:both;
12}
13

で、どうですかね？
フロート解除のためにoverflow:hidden;を使ってて、それが原因でリストの番号が
消えてしまうなら、clearfixでフロート解除するように方法を変更すればいいと思います。
他にもやりようはありますが、今の手法を元に改修するならこれかな。

投稿2019/04/22 03:12

aKusano

総合スコア3763

Romay

2019/04/22 05:16

回答ありがとうございます。こちらの方法でも<idea>の高さは可変にできました。しかし、リスト番号が高さの最下部の左端に移動してしまったため、他の回答者の方の案を使わせていただくことにしました。コメントいただきありがとうございました。

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

これだけでいいのでは？

CSS
1.content .idea {
2    /*overflow: hidden;*/
3    clear: both;
4}

投稿2019/04/24 08:03

x_x

総合スコア13749

ベストアンサー

overflow: hidden;を.ideaではなく.idea-textに付けてみてください。

すみません、質問文をちゃんと読んでおらず、横並びで番号が付けばいいのかと。。。
liに付けると番号が消えてしまうなら、もう一個囲ってしまえばいいんじゃないかなと思います。

css
1.idea{
2  font-size: 12px;
3  font-weight: 500;
4  margin-left: 20px;
5}
6.outer{ overflow:hidden; }
7.outer::after{ content:"";clear:both; }
8.idea-text{
9  float:left;
10  width:80%;
11}
12.item-menu-right{
13  float:right;
14}

html
1<li class="idea">
2  <div class="outer"><!-- ←追加! -->
3    <div class="idea-text">
4      <div  class="---" >
5        <%= item.text  %>
6      </div>
7    </div>
8    <div class="item-menu-right">#aタグ要素等</div>
9  </div>
10</li>