我有一個有序列表(ol ),它的顯示屬性設置為flex。列表項也呈現為flexboxes。這樣做會導致項目符號(數字)不再顯示。

有什么方法可以讓項目符號顯示在帶有classes . questions-Likert的ol上(在40px填充的區域)？

見提琴(含SCSS):http://jsfiddle.net/3y5t0xpx/3/

HTML & amp下面編譯的CSS:

超文本標記語言

<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生效的先決條件。

在這里，使用計數器可能是您的最佳選擇。

https://developer . Mozilla . org/en-US/docs/Web/CSS/CSS _ Lists _ and _ Counters/Using _ CSS _ Counters

剛剛遇到了同樣的問題?？戳诉@個題目，我以為沒有簡單的解決辦法，但還是找到了。 您可以簡單地在列表中添加一個容器，并將所有必要的樣式賦予容器，而不是列表。

<li>
    <div class="question">
        ------
    </div>
</li>