LoginSignup
0

More than 3 years have passed since last update.

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

Posted at

次のような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;

}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0