문제
I'm trying to create a row of elements with the following features:
My current efforts are using flexbox and haven't been able to fulfil all of these conditions. My latest attempt (tested in Chrome so far) is below but condition 3 is not met.
Is there something I'm missing? Or is there an alternative approach that might work?
https://stackoverflow.com/questions/22834781
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russiandiv {
display: inline-block;
}
ul {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
}
li {
flex: 1;
}
a {
display: block;
padding: 1em;
border: solid black 1px;
}<div>
<ul>
<li>
<A href="/">foo</a>
</li>
<li>
<A href="/">barrrrrrrrr</a>
</li>
<li>
<A href="/">foooooooooooo</a>
</li>
<li>
<A href="/">foo</a>
</li>
<li>
<A href="/">hello world</a>
</li>
</ul>
</div>(I'm not using browser compatibility vendor-prefixed versions for this test, so you might have to select a browser with good flexbox support).
해결책
I was able to accomplish this by using display: inline-grid on the parent element and then adding the property grid-template-columns: 1fr 1fr 1fr to the parent as well (1fr per column needed).
div.inline {
display: inline-grid;
grid-template-columns: 1fr 1fr;
}
div.cell {
border: 1px dotted grey;
text-align: center;
}content
<div class='inline'>
<div class='cell'>lorem ipsum lorem ipsum</div>
<div class='cell'>lorem</div>
</div>
content다른 팁
An alternative would be to use display:table with table-layout:fixed, then setting the width of the underlying cells to 1% forces the browser into using an algorithm to use equal widths for all cells.
div.inline {
display:inline-block;
width:250px;
}
.table {
display: table;
table-layout: fixed;
width:100%;
}
.cell {
display: table-cell;
border: 1px dotted red;
width: 1%;
}content
<div class='inline'>
<div class='table'>
<div class='cell'>lorem ipsum lorem ipsum</div>
<div class='cell'>lorem</div>
</div>
</div>
contentWould this be an acceptable solution?
If the area for the inline block is wide enough it ticks all your points, if it's not wide enough then it fails 2.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div {
display: inline-block;
}
ul {
display: table;
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: table-cell;
width: 20%;
text-align: center
}
a {
display: block;
padding: 1em;
border: solid black 1px;
}
</style>
</head>
<body>
<div>
<ul>
<li><A href="/">foo</a></li>
<li><A href="/">barrrrrrrrr</a></li>
<li><A href="/">foooooooooooo</a></li>
<li><A href="/">foo</a></li>
<li><A href="/">hello world</a></li>
</ul>
</div>
</body>
</html>
