表 - 按鈕大小固定

Question

我想用左邊的按鈕和右邊的文本用幾行來製作一個列表。

我沒有問題，當它一行文本。 Howerver我的問題是，當我有幾行我的按鈕不是一個圓形了。你有解決方案嗎？謝謝你，

這裏是我的代碼：

--> HTML 

<!-- <nav id="banner2"> 

    <li href="#" class="button2"> Go </li> 
    <li> Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus. Praesent semper mod quis eget mi. Etiam eu<br />ante risus. Aliquam erat volutpat. Aliquam luctus et mattis lectus amet pulvinar. Nam nec turpis consequat.</li> 

</nav> 


--> CSS 

#banner2 { 
       background-color: #fff; 
       width: 100%; 

       line-height: 1.6em; 
       font-family: 'Open Sans Condensed', sans-serif; 
       font-weight: 700; 
       padding-bottom: 2em; 
       padding-top: 2em; 
       border-bottom: thick dotted #08844E; 
       border-top: thick dotted #08844E; 
       float:left; 

    } 
      #banner2 li{ 

       display: table-cell; 
       margin: 10em 10em 0 10em; 
       padding: 0em 2em 0 2em; 
       vertical-align:middle 


      } 

        #banner2 li.button2 { 
      -moz-transition: border-color .2s ease-in-out, color .2s ease-in-out; 
      -webkit-transition: border-color .2s ease-in-out, color .2s ease-in-out; 
      -ms-transition: border-color .2s ease-in-out, color .2s ease-in-out; 
      transition: border-color .2s ease-in-out, color .2s ease-in-out; 

      color: #F45929; 
      background: #CCDB86!important; 
      border: solid 4px #575d59; 
      border-color: #08844E; 
      text-align:center; 
      position: relative; 
      border-radius: 1.17em; 
      width:2em; 
      height: 2em; 

      text-decoration: none; 
      font-size: 2.0em; 
      padding: 0.4em 0.3em 0.6em 0.3em; 
     } 

      #banner2 li.button2:hover { 
       color: white; 
       border-color: #0FAA66; 
       background: #0FAA66 !important; 
       text-align:left; 
      cursor: pointer; 
      border-bottom: : solid 2px red; 


      } 

      #banner2 li.button2:active { 
       color: #fff; 
       border-color: #0FAA66; 
       background-color: red; 
       text-align:left; 
       cursor: pointer; 
       border-bottom: : solid 2px red;} 

Answer 1

的問題是，你的li，你作爲一個按鈕使用，也與第二li表格單元格的兄弟姐妹，並且因爲它的文本流過很多行，所以你的按鈕li。

當它出現，你需要一個按鈕，使用鏈接代替，這樣

側面說明，作爲li的父母應該是一個ul，我改變了你nav了這一點。

#banner2 { 
 
    background-color: #fff; 
 
    width: 100%; 
 
    line-height: 1.6em; 
 
    font-family: 'Open Sans Condensed', sans-serif; 
 
    font-weight: 700; 
 
    padding-bottom: 2em; 
 
    padding-top: 2em; 
 
    border-bottom: thick dotted #08844E; 
 
    border-top: thick dotted #08844E; 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 

 
#banner2 li { 
 
    display: table-cell; 
 
    margin: 10em 10em 0 10em; 
 
    padding: 0em 2em 0 2em; 
 
    vertical-align: middle 
 
} 
 

 
#banner2 li a.button2 { 
 
    -moz-transition: border-color .2s ease-in-out, color .2s ease-in-out; 
 
    -webkit-transition: border-color .2s ease-in-out, color .2s ease-in-out; 
 
    -ms-transition: border-color .2s ease-in-out, color .2s ease-in-out; 
 
    transition: border-color .2s ease-in-out, color .2s ease-in-out; 
 
    color: #F45929; 
 
    background: #CCDB86!important; 
 
    border: solid 4px #575d59; 
 
    border-color: #08844E; 
 
    text-align: center; 
 
    position: relative; 
 
    border-radius: 1.17em; 
 
    width: 2em; 
 
    height: 2em; 
 
    text-decoration: none; 
 
    font-size: 2.0em; 
 
    padding: 0.4em 0.3em 0.6em 0.3em; 
 
} 
 

 
#banner2 li a.button2:hover { 
 
    color: white; 
 
    border-color: #0FAA66; 
 
    background: #0FAA66 !important; 
 
    text-align: left; 
 
    cursor: pointer; 
 
    border-bottom: : solid 2px red; 
 
} 
 

 
#banner2 li a.button2:active { 
 
    color: #fff; 
 
    border-color: #0FAA66; 
 
    background-color: red; 
 
    text-align: left; 
 
    cursor: pointer; 
 
    border-bottom: : solid 2px red; 
 
}

<ul id="banner2"> 
 

 
    <li> <a href="#" class="button2">Go</a> </li> 
 
    <li> Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus. Praesent semper mod quis eget mi. Etiam eu<br />ante risus. Aliquam erat volutpat. Aliquam luctus et mattis lectus amet pulvinar. Nam nec turpis consequat.</li> 
 

 
</ul>