私の問題のjsfiddle hereがあります。私はli
の未知数をulの中に均等に分配したいと思います。しかし、あなたがフィドルから見ることができるように、中央のリはヘッダーのすぐ下にないので、正しく中央に配置されていません。また、li
のそれぞれを調べると、幅が異なります。中央の中央の李が均等に広がっています。
li
の真ん中がヘッダーに合わせるように修正するにはどうすればよいですか?
私の問題のjsfiddle hereがあります。私はli
の未知数をulの中に均等に分配したいと思います。しかし、あなたがフィドルから見ることができるように、中央のリはヘッダーのすぐ下にないので、正しく中央に配置されていません。また、li
のそれぞれを調べると、幅が異なります。中央の中央の李が均等に広がっています。
li
の真ん中がヘッダーに合わせるように修正するにはどうすればよいですか?
方法#01:
は.strweak-list
のスタイルでtable-layout: fixed
を追加します。
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.strweak-header {
text-align: center;
}
.strweak-list {
table-layout: fixed;
display: table;
width: 100%;
list-style: none;
}
.cell {
display: table-cell;
text-align: center;
}
<h5 class='strweak-header'>strongAgainst</h5>
<ul class="strweak-list">
<li class="cell">water</li>
<li class="cell">ghost</li>
<li class="cell">ground</li>
</ul>
方法#02:
あなたにも、CSS FlexBoxを使用することができます。
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ader {
text-align: center;
}
.strweak-header {
text-align: center;
}
.strweak-list {
text-align: center;
list-style: none;
display: flex;
}
.strweak-list li {
flex-basis: 33.33%;
}
<h5 class='strweak-header'>strongAgainst</h5>
<ul class="strweak-list">
<li>water</li>
<li>ghost</li>
<li>ground</li>
</ul>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t font-size: 100%;
\t font: inherit;
\t vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
\t display: block;
}
body {
\t line-height: 1;
}
ol, ul {
\t list-style: none;
}
blockquote, q {
\t quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
\t content: '';
\t content: none;
}
table {
\t border-collapse: collapse;
\t border-spacing: 0;
}
.strweak-header {
text-align: center;
}
.strweak-list {
display: flex;
justify-content: space-around;
width: 100%;
list-style: none;
}
<h5 class='strweak-header'>strongAgainst</h5>
<ul class="strweak-list">
<li>water</li>
<li>ghost</li>
<li>ground</li>
</ul>
これは、あなたがフレキシボックスでそれを行う方法です。それが役に立てば幸い!乾杯!