呈现为flexbox的有序列表不显示项目符号/小数（项目也呈现为flexbox） [英] Ordered list rendered as flexbox doesn't show bullets/decimals (items also rendered as flexbox)
本文介绍了呈现为flexbox的有序列表不显示项目符号/小数（项目也呈现为flexbox）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个排序列表（ ol ），其 display 属性设置为 flex 。列表项也呈现为弹性框。这样做会导致项目符号（数字）不再显示。
I have an ordered list (ol) that has it's display property set to flex. Also the list items are rendered as flexboxes. Doing this results in the bullets (numbers) not being shown anymore.
有什么方法可以使项目符号显示在 .questions.questions--likert （在填充40px 填充是）？
Is there any way I can get the bullets to show on the ol with classes .questions.questions--likert (in the area where the 40px padding is)?
请参见提琴（包含SCSS）： http://jsfiddle.net/3y5t0xpx/3/
See Fiddle (contains SCSS): http://jsfiddle.net/3y5t0xpx/3/
HTML&
HTML
<form class="form form--test" name="frm-identification" action="/" method="post">
<fieldset>
<h2>Identificatie</h2>
<p>Gelieve volgende gegevens in te vullen vooraleer de test te starten.</p>
<ol class="questions questions--likert">
<li class="question">
<p class="description">Inventieve ideeen brengen</p>
<ul>
<li><label class="input-container input-container--radio"><input type="radio" name="rbt-t1q1" id="rbt-t1q1-1" value="1" /><span class="value">1</span></label></li>
<li><label class="input-container input-container--radio"><input type="radio" name="rbt-t1q1" id="rbt-t1q1-2" value="2" /><span class="value">2</span></label></li>
<li><label class="input-container input-container--radio"><input type="radio" name="rbt-t1q1" id="rbt-t1q1-3" value="3" /><span class="value">3</span></label></li>
<li><label class="input-container input-container--radio"><input type="radio" name="rbt-t1q1" id="rbt-t1q1-4" value="4" /><span class="value">4</span></label></li>
<li><label class="input-container input-container--radio"><input type="radio" name="rbt-t1q1" id="rbt-t1q1-5" value="5" /><span class="value">5</span></label></li>
<li><label class="input-container input-container--radio"><input type="radio" name="rbt-t1q1" id="rbt-t1q1-6" value="6" /><span class="value">6</span></label></li>
<li><label class="input-container input-container--radio"><input type="radio" name="rbt-t1q1" id="rbt-t1q1-7" value="7" /><span class="value">7</span></label></li>
</ul>
</li>
</ol>
</fieldset>
</form>
已编译的CSS：
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic);
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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 {
content: '';
content: none;
}
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
html {
color: #333;
font: 87.5% 'Open Sans', sans-serif;
}
body {
font-size: 1rem;
line-height: 1.428571429;
}
h1 {
font-weight: 600;
font-size: 20px;
margin-top: 0;
margin-bottom: 10px;
text-transform: uppercase;
}
h2 {
font-size: 18px;
margin-top: 15px;
margin-bottom: 10px;
}
p {
margin: 0 0 10px;
}
ul, ol {
margin-top: 0;
margin-bottom: 10px;
}
ul li, ol li {
margin: 0 0 0 1.5rem;
padding: 0;
}
ol {
list-style: decimal outside none;
}
ul {
list-style: disc outside none;
}
.form input, .form textarea {
font-family: 'Open Sans', sans-serif;
color: #333;
}
.form dl {
padding-top: 10px;
}
.form dl dt, .form dl dd {
padding: 0 0 10px;
margin: 0;
}
.form dl dt {
font-size: 12px;
vertical-align: top;
font-weight: bold;
padding-bottom: 5px;
}
.form dl dt .required {
color: #f00;
}
.form ol {
padding: 0;
margin: 0;
}
.form ol li {
margin: 0;
}
.form fieldset {
padding: 10px 0;
}
.questions {
list-style: decimal outside none;
}
.questions li {
padding-left: 40px;
}
.questions.questions--likert .question {
display: flex;
}
.questions.questions--likert .question .description {
flex: 0 0 300px;
margin: 0;
padding: 0 0 0 40px;
}
.questions.questions--likert .question ul {
display: flex;
flex: 0 0 420px;
list-style: none outside none;
justify-content: space-between;
margin: 0;
padding: 0;
width: 100%;
}
.questions.questions--likert .question ul li {
flex: 1 1 auto;
margin: 0;
padding: 0;
}
.questions.questions--likert .question ul li .input-container {
width: 100%;
}
.input-container.input-container--radio {
border-radius: 6px 6px 0 0;
background: transparent;
cursor: pointer;
display: inline-block;
padding: 10px;
position: relative;
text-align: center;
}
.input-container.input-container--radio:hover {
background-color: #efefef;
}
.input-container.input-container--radio:hover .value {
display: inline-block;
position: absolute;
padding: 5px 10px;
top: 100%;
left: 0;
width: 100%;
}
.input-container.input-container--radio .value {
background: #bfbdbc;
clear: both;
color: #28211e;
display: block;
font-size: 0.857143rem;
text-align: center;
width: 100%;
display: none;
border-radius: 0 0 6px 6px;
box-shadow: inset 0px 3px 2px -2px rgba(0, 0, 0, 0.25);
}
推荐答案
list-style 仅适用于具有 display：list-item 的元素–因此，通过将LI设为 display：flex ，您将删除列表样式生效的先决条件。
list-style applies to elements with display: list-item only – so by making your LI display: flex, you are removing the prerequisite for list-style to have any effect.
使用计数器可能是您最好的选择。
Using a counter is probably your best bet here.
这篇关于呈现为flexbox的有序列表不显示项目符号/小数（项目也呈现为flexbox）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
