前提・実現したいこと
ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
一番上のリストはwidth:100%;で横幅をいっぱいにし、
残りのリストは縦2列でテキストをたくさん入れた際、ウィンドウ幅に合わせて高さ可変したいのですが
3つ目のリストに隙間ができるので改善方法をどなたか教えていただけませんでしょうか?
エラーメッセージ
該当のソースコード
html
<header> <div class="contents-menu"> <ul class="menu-bar"> <li class="list">menu</li> <li class="list">menuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li> <li class="list">menu</li> <li class="list">menu</li> <li class="list">menu</li> </ul> </div></header>
css
.menu-bar {
letter-spacing: -0.5rem;
width: 100%;
vertical-align: middle;
}
.list {
display: inline-block;
background:#8A8A8A;
border: 1px solid #000;
color: #fff;
text-align: center;
vertical-align: bottom;
width: 50%;
height: 100%;
max-height: 200px;
padding: 50px;
letter-spacing: normal;
word-wrap:break-word;
overflow: hidden;
}
.list:first-child {
width: 100%;
}
ソースコード ```HTML CSS ### 試したこと ここに問題に対して試したことを記載してください。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。