分成两列的CSS按钮

Question

我正在尝试做一个有四到八个按钮的多项选择测验。我遇到的问题是让它们分成两列。我试过使用“column: 2"，但它们不均匀，我还试着改变列表的宽度以强制它们，但这对我也不起作用。

这里有一个jsfiddle：https://jsfiddle.net/sethkillian2/2t63v2nz/3/

<div id="central-area" class="central-area">

    <div class="main multiple-choice">
         <div class="question-row row column">
            <div class="question-text">
            vivre
            </div>
         </div>
         <div class="hint row column">
            <span class="hint-text">Select the correct <strong>French</strong> for the <strong>English</strong> above:</span>
        </div>
        <ol class="choices clearfix ">
            <li class="shiny-box choice clearfix" data-choice-id="0">
                <span class="val ">to return</span>
                <span class="marking-icon"></span>
            </li>
            <li class="shiny-box choice clearfix" data-choice-id="1">
                <span class="val ">to wear</span>
                <span class="marking-icon"></span>
            </li>
            <li class="shiny-box choice clearfix" data-choice-id="2">
                <span class="val ">to sustain</span>
                <span class="marking-icon"></span>
            </li>
            <li class="shiny-box choice clearfix" data-choice-id="3">
                <span class="val ">to live</span>
                <span class="marking-icon"></span>
            </li>
        </ol>
    </div>  

</div>

CSS代码：

.multiple-choice .hint {
    text-shadow: 1px 1px 0 white;
    color: #aaa;
    font-family: "Helvetica Neue", "Helvetica", "Arial", "Kai", "KaiTi", Sans-Serif;
    padding: 11.42857px;
    font-size: 17.6px;
}

.multiple-choice .hint .hint-text {
    display: block;
    float: left;
    overflow: hidden
}

.multiple-choice ol {
    display: block;
    list-style-type: none;
    padding: 0;=
}

.multiple-choice li {
    width: 260px;
    margin-top: 12px;
    padding: 8px 17px 8px 43px;
    overflow: hidden;
}

.multiple-choice li:hover {
  background-color: purple;
  color: white;
}

.shiny-box {
    color: #6D6E70;
    border: 1px solid #e6e6e6;
    background-color: #fff;
    border-radius: 10px;
    background-repeat: repeat-x;
    background-size: 100% 100%;
    border: 1px solid #E6E6E6;
    color: #3E3E3E;
    font-family: "Times New Roman", "Times", "Kai", "KaiTi", Serif;
    font-size: 30px;
    line-height: 41px;
    transition: background-color 0.1s linear, opacity 0.1s linear, border-color 0.1s linear
}

这是我想要的东西和我所拥有的东西的图片。

Image

Answer 1

您可以将display:inline-block添加到.choice规则中。然而，这个答案并没有利用Bootstrap。今晚我将尝试更新答案，以反映使用Bootstrap Grid。

.choice{ /*NEW*/
  display: inline-block;
}

​

.choice{ /*NEW*/
  display: inline-block;
}

.central-area {
    width: 535px;
    margin: 16px auto 0;
    position: relative;
    z-index: 300;
}

.multiple-choice .question-row .question-text {
    display: inline;
    word-wrap: break-word;
    color: #3E3E3E;
    float: left;
    font-family: "Times New Roman","Times","Kai","KaiTi",Serif;
    font-size: 28px;
    line-height: 30px;
    padding-top: 15px;
    width: 360px;
}

.multiple-choice .hint {
    text-shadow: 1px 1px 0 white;
    color: #aaa;
    font-family: "Helvetica Neue", "Helvetica", "Arial", "Kai", "KaiTi", Sans-Serif;
    padding: 11.42857px;
    font-size: 17.6px;
}

.multiple-choice .hint .hint-text {
    display: block;
    float: left;
    overflow: hidden
}

.multiple-choice ol {
	display: block;
	list-style-type: none;
	padding: 0;=
}

.multiple-choice li {
	width: 260px;
	margin-top: 12px;
    padding: 8px 17px 8px 43px;
    overflow: hidden;
}

.multiple-choice li:hover {
  background-color: purple;
  color: white;
}

.shiny-box {
    color: #6D6E70;
    border: 1px solid #e6e6e6;
    background-color: #fff;
    border-radius: 10px;
    background-repeat: repeat-x;
    background-size: 100% 100%;
    border: 1px solid #E6E6E6;
    color: #3E3E3E;
    font-family: "Times New Roman", "Times", "Kai", "KaiTi", Serif;
    font-size: 30px;
    line-height: 41px;
    transition: background-color 0.1s linear, opacity 0.1s linear, border-color 0.1s linear
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="central-area" class="central-area">

	<div class="main multiple-choice">
         <div class="question-row row column">
         	<div class="question-text">
        	vivre
         	</div>
         </div>
         <div class="hint row column">
            <span class="hint-text">Select the correct <strong>French</strong> for the <strong>English</strong> above:</span>
        </div>
        <ol class="choices clearfix ">
		    <li class="shiny-box choice clearfix" data-choice-id="0">
		        <span class="val ">to return</span>
		        <span class="marking-icon"></span>
		    </li>
		    <li class="shiny-box choice clearfix" data-choice-id="1">
		        <span class="val ">to wear</span>
		        <span class="marking-icon"></span>
		    </li>
		    <li class="shiny-box choice clearfix" data-choice-id="2">
		        <span class="val ">to sustain</span>
		        <span class="marking-icon"></span>
		    </li>
		    <li class="shiny-box choice clearfix" data-choice-id="3">
		        <span class="val ">to live</span>
		        <span class="marking-icon"></span>
		    </li>
		</ol>
	</div>	

</div>

​

Answer 2

解决方案非常简单。我基本上是在您的.shiny-box类中添加display: inline-block。

这是针对您的问题的jsfiddle。