Question

我正在尝试建立一个答案比较页面，用户可以在其中比较测验游戏中的答案。我有表的问题一直显示在一行上的所有答案集，导致集群显示。如果需要，我希望表格单元格可以调整并在新行上开始 - 这里是JSFiddle CSS：

#scores {
    display: table;
    margin: 0 auto;
    border: 1px black solid;
}
/* The answers handling */
#userC, #scoreC1, #scoreC2, #scoreC3, #scoreC4, #scoreC5, #scoreC6, #scoreC7   {
    display: table-cell;
    margin-right: 1.4em;
    border: 1px black solid;
}
/* The answers handling - usernames and scores*/ 
#user1, #user2, .score1, .score2 {
    margin-right: 1.4em;
    border: 1px black solid;
}

HTML：

<div id="scores">
    <div id="userC">
        <div id="user1">Player1</div><div id="user2">Player2</div>
    </div>
    <div class= "inlineS" id="scoreC1">
        <div class="score1">Video games</div><div class="score2">Video games</div>
    </div>

    <div class= "inlineS" id="scoreC2">
        <div class="score1">Winter</div><div class="score2">Summer</div>
    </div>

    <div class= "inlineS" id="scoreC3">
        <div class="score1">Ice cream</div><div class="score2">Ice cream</div>
    </div>

    <div class= "inlineS" id="scoreC4">
        <div class="score1">Night owl</div><div class="score2">Night owl</div>
    </div>

    <div class= "inlineS" id="scoreC5">
        <div class="score1">Go out</div><div class="score2">Stay at home</div>
    </div>

    <div class= "inlineS" id="scoreC6">
        <div class="score1">TV series</div><div class="score2">Movies</div>
    </div>

    <div class= "inlineS" id="scoreC7">
        <div class="score1">Meat</div><div class="score2">Veggie</div>
    </div>

</div>

Answer 1

#user1, #user2, .score1, .score2 {
    display: table-row; <-------
    margin-right: 1.4em;
    border: 1px black solid;
}

Updated Fiddle

或Veritcally

/* The answers handling */
#userC, #scoreC1, #scoreC2, #scoreC3, #scoreC4, #scoreC5, #scoreC6, #scoreC7   {
    display: table-row;
    margin-right: 1.4em;
    border: 1px black solid;
}
/* The answers handling - usernames and scores*/ 
#user1, #user2, .score1, .score2 {
    display: table-cell;
    margin-right: 1.4em;
    border: 1px black solid;
}

Another Update

显示表 - CSS，使表格单元格对出现在新行上

1 个答案: