表 - 按钮大小已修复

Question

我正在尝试使用左侧的按钮创建一个列表，并使用几行创建右侧的文本。

一行文字时我没有问题。 我的问题是，当我有几行时，我的按钮不再是一个圆圈了。你有解决方案吗？谢谢，

这是我的代码：

--> 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的表格单元格，并且由于其文本流过多行，因此您的按钮{ {1}}。

因为看起来你需要一个按钮，所以请改用链接，就像这样

旁注，因为li的父级应该是li，我将您的ul更改为。{/ em>

＆＃13;

＆＃13;

nav

＆＃13;

#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;
}

＆＃13;

＆＃13;

＆＃13;