前提・実現したいこと
<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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/22 05:16