html - 表 - 按钮大小固定

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 同级的表格单元格，因为它的文本流过很多行，您的按钮 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>