Question

我有一个有序列表（ol），其display属性设置为flex。列表项也呈现为flexboxes。这样做会导致子弹（数字）不再显示。

我是否可以通过ol类.questions.questions--likert（在40px padding所在的区域内）显示子弹？

请参阅小提琴（包含SCSS）：http://jsfiddle.net/3y5t0xpx/3/

HTML＆amp;编译下面的CSS：

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);
}

Answer 1

)仅适用于list-style的元素 - 因此，通过制作LI display: list-item，您将删除display: flex产生任何效果的先决条件。

使用list-style可能是您最好的选择。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

呈现为flexbox的有序列表不显示项目符号/小数（项目也呈现为flexbox）

1 个答案: