JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<p>display : box 이용</p>
<div class="box3">
	<ul>
		<li><a href="#">메뉴메뉴메뉴메뉴메뉴메뉴메뉴메뉴메뉴뉴메뉴메뉴뉴메뉴메뉴뉴메뉴메뉴뉴메뉴메뉴</a></li>
		<li><a href="#">뉴메뉴메뉴뉴메뉴메뉴뉴메뉴메뉴뉴메뉴메뉴</a></li>
		<li><a href="#">메뉴메뉴</a></li>
		<li><a href="#">메뉴메</a></li>
		<li><a href="#">메뉴메뉴메뉴뉴메뉴메뉴뉴메뉴</a></li>
	</ul>
</div>

<p>display : table 이용</p>
<div class="box">
	<ul>
		<li><a href="#">메뉴메뉴메뉴메뉴메뉴뉴메뉴메뉴뉴메뉴메뉴메뉴메뉴메뉴메뉴</a></li>
		<li><a href="#">메뉴메뉴</a></li>
		<li><a href="#">메뉴메뉴</a></li>
		<li><a href="#">메뉴메</a></li>
		<li><a href="#">메뉴메뉴</a></li>
	</ul>
</div>

CSS

.box3	{width:500px;margin-bottom:30px;}
.box3 ul {
/* Old Syntax */
   display: -webkit-box;
   display: box;
   box-orient: horizontal; 
   -webkit-box-pack: center;
  -webkit-box-align: stretch;
}
.box3 ul li {background:red;border-left:1px solid #333;
display: -webkit-box;
   display: box;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  width:50px;
  

}
.box3 ul li a {font-size:12px;color:#fff;text-decoration:none;background:#000;text-align:center;vertical-align:middle;padding:10px;
display: -webkit-box;
   display: box;
-webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-box-align: center;
box-align: center;
-webkit-box-pack: center;
box-pack: center;

}
.box3 ul li a:hover	{background:#ff6600;}



.box	{width:500px;margin-bottom:30px;}
.box ul {display:table;width:100%;border-collapse:collapse;border-spacing:0;}
.box ul li {display:table-cell;width:20%;height:100%;text-align:center;vertical-align:middle;background:red;border-spacing:0;
}
.box ul li a {font-size:12px;color:#fff;text-decoration:none;background:#000;width:100%;padding:10px;box-sizing:border-box;text-align:center;vertical-align:middle;
	display: -webkit-box;
	-webkit-box-orient: horizontal;

	-webkit-box-align: center;
	display: -moz-box;
	-moz-box-orient: horizontal;
	-moz-box-pack: center;
	-moz-box-align: center;
	display: box;
	box-orient: horizontal;
	box-pack: center;
	box-align: center;
}
.box ul li a:hover	{background:#ff6600;}