將CSS按鈕分成兩列

我正在嘗試使用四個和八個按鈕進行多項選擇測驗。我遇到的問題是讓他們分成兩列。我試過使用「列：2」，但他們變得不均勻，我試圖改變列表的寬度，以強制他們，但這並沒有爲我工作。將CSS按鈕分成兩列

這裏有一個的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 
}

而這裏的想什麼，我VS我有一個圖片。

Image

來源

2017-08-09 Seth Killian

是[THIS]（https://jsfiddle.net/bonez0607/0vtjetzf/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 { 
 
\t display: block; 
 
\t list-style-type: none; 
 
\t padding: 0;= 
 
} 
 

 
.multiple-choice li { 
 
\t width: 260px; 
 
\t 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"> 
 

 
\t <div class="main multiple-choice"> 
 
     <div class="question-row row column"> 
 
      \t <div class="question-text"> 
 
     \t vivre 
 
      \t </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 "> 
 
\t \t  <li class="shiny-box choice clearfix" data-choice-id="0"> 
 
\t \t   <span class="val ">to return</span> 
 
\t \t   <span class="marking-icon"></span> 
 
\t \t  </li> 
 
\t \t  <li class="shiny-box choice clearfix" data-choice-id="1"> 
 
\t \t   <span class="val ">to wear</span> 
 
\t \t   <span class="marking-icon"></span> 
 
\t \t  </li> 
 
\t \t  <li class="shiny-box choice clearfix" data-choice-id="2"> 
 
\t \t   <span class="val ">to sustain</span> 
 
\t \t   <span class="marking-icon"></span> 
 
\t \t  </li> 
 
\t \t  <li class="shiny-box choice clearfix" data-choice-id="3"> 
 
\t \t   <span class="val ">to live</span> 
 
\t \t   <span class="marking-icon"></span> 
 
\t \t  </li> 
 
\t \t </ol> 
 
\t </div> \t 
 

 
</div>

來源

2017-08-09 20:45:50

解決的辦法很簡單。我基本上增加了display: inline-block到你的.shiny-box類。

這是jsfiddle到您的問題。

來源

2017-08-09 20:48:35 flawy

將CSS按鈕分成兩列

回答

相關問題