爲什麼我的h2不能停留在一條線上？

Question

我在使用css格式時遇到了一些麻煩。我希望h2能夠集中在一條線上，但由於某種原因，它並沒有這樣做。我已經檢查了顯而易見的地方，例如display屬性，但沒有找到任何東西。在應用我的css之前，我使用了normalize.css。 從index.html的

<div class = "input-area"> 

    <div class = "input-wrapper"> 
    <h2>Pick <a href="http://en.wikipedia.org/wiki/Three">three</a> powers!</h2> 
      </div> 
      <div class = "options"> 
       <div class = "input-list first-list"> 
       <ul> 
       <li><button type = "button" id = "choice 1"> </button></li> 
       <li><button type = "button" id = "choice 2"> </button></li> 
       <li><button type = "button" id = "choice 3"> </button></li> 
       <li><button type = "button" id = "choice 4"> </button></li> 
      <li><button type = "button" id = "choice 5"> </button></li> 
      </ul> 
      </div> 
      <div class = "input-list"> 
      <ul> 
      <li><button type = "button" id = "choice 6"> </button></li> 
      <li><button type = "button" id = "choice 7"> </button></li> 
      <li><button type = "button" id = "choice 8"> </button></li> 
      <li><button type = "button" id = "choice 9"> </button></li> 
      <li><button type = "button" id = "choice 10"> </button></li> 
      </ul> 
      </div> 
     </div> 

     <div class = "input-wrapper"> 
     <button type="button" onclick = "test()" id = "submit" >Test</button> 
     </div> 
    </div> 

從style.css的

/*input */ 
.input-area 
{ 
    margin:0; 
    padding:0; 
    background: #2dcc70; 
} 
.input-wrapper 
{ 
    margin: 0px 50%; 
    clear:both; 
} 
.options 
{ 
    width: 100%; 
    margin: 5px 0 5px 0; 
} 
.input-list 
{ 
    display:inline; 
    list-style: none; 
    float:left; 
    margin: 0 3% 0 3%; 
} 

我試着顯示屬性的幾個選項，但我所有的想法......也開放給一些批評

Answer 1

.input-wrapper的左右邊距爲50％，增加到100％。所以實際內容沒有剩餘空間，所有東西都被擠壓到儘可能小的空間。

我不認爲你需要利潤率。如果要居中文本，只需使用：

.input-wrapper { 
    text-align: center; 
} 

但後來，我真的不明白，爲什麼你身邊單一稀土元素所有這些DIV包裝：

h2 { 
    text-align: center; 
} 

您還可以添加類到h2或ul，或者把整個東西放在一個容器裏等。