More than 5 years have passed since last update.

【css】display: table-cell でli要素を横並びに表示する

HTML
CSS

Posted at 2019-10-13

次のようなhtmlがあるとき、li属性を横並びに表示したい

 <title>メニュ</title>
</head>
<body>
  <h3></h3>
  <ul class = "tes">
    <li><a href="#">HOME</a></li>
    <li><a href="#">page1</a></li>
    <li><a href="#">page2</a></li>
    <li><a href="#">page3</a></li>
    <li><a href="#">page4</a></li>

次のようにcssをあてる

ul.tes {
    display:table;
    table-layout:fixed;
    width:500px;
    padding-bottom: 40px;
}
ul.tes li {
    display:table-cell;

}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up