我的CSS不会显示:内联;我的按钮

Here is my HTML:

这是我的HTML:

<div class="container">
    <ul>
    <li><a href="http://www.kbb.com/scion/fr-s/2013/" class="button">YES</a></li>
    </ul>
</div>
<div class="2"> 
    <ul>
    <li><a href="http://tinyurl.com/nk4k25r" class="button">NO</a></li>
    </ul>
</div>


<div class="3">
    <ul>
    <li><a href="http://tinyurl.com/pnaj3j2"  class="button">YES</a></li>

</div>
<div class="4">
    <ul>
    <li><a href="http://tinyurl.com/qybshxz" class="button">NO</a></li>
    </ul>
</div>
</div>

And here is my CSS:

这是我的CSS:

.button {
        display: block;
        height: 100px;
        width: 200px;
        background: #ffff00;
        border: 2px solid #00E5EE;
        color: #551A8B;

        text-align: center;
        font: bold 3.2em/100px Impact;

        background: -webkit-linear-gradient(top, #ffff00, #2f5f63);
        background: -moz-linear-gradient(top, #ffff00, #2f5f63);
        background: -o-linear-gradient(top, #ffff00, #2f5f63);
        background: -ms-linear-gradient(top, #ffff00, #2f5f63);
        background: linear-gradient(top, #ffff00, #2f5f63);

        -khtml-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 90px;
        margin: 0px 0px 15px 15px;
    div li {
        display: inline;
        float: center;
    }

I'm working on getting my buttons to align in the center of the page and inline but every time I try to use display: inline; my buttons get smaller and stay vertical.

我正在努力使我的按钮在页面的中心和内联对齐但是每次我尝试使用display: inline;我的按钮变小了，保持垂直。

2 个解决方案

#1

.button has display:block; so you can centering by margin:0 auto; and float property doesn't have center value.

.button显示:块;所以你可以以边缘为中心:0自动;浮动属性没有中心值。

.button {
  display: block;
  height: 100px;
  width: 200px;
  background: #ffff00;
  border: 2px solid #00E5EE;
  color: #551A8B;
  text-align: center;
  font: bold 3.2em/100px Impact;
  background: -webkit-linear-gradient(top, #ffff00, #2f5f63);
  background: -moz-linear-gradient(top, #ffff00, #2f5f63);
  background: -o-linear-gradient(top, #ffff00, #2f5f63);
  background: -ms-linear-gradient(top, #ffff00, #2f5f63);
  background: linear-gradient(top, #ffff00, #2f5f63);
  -khtml-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 90px;
  margin: 0px auto 15px;
}
div li {
  display: block;
}
body {
  text-align: center;
}
div {
  display: inline-block;
}

<div class="container">
  <ul>
    <li><a href="http://www.kbb.com/scion/fr-s/2013/" class="button">YES</a>
    </li>
  </ul>
</div>
<div class="2">
  <ul>
    <li><a href="http://tinyurl.com/nk4k25r" class="button">NO</a>
    </li>
  </ul>
</div>


<div class="3">
  <ul>
    <li><a href="http://tinyurl.com/pnaj3j2" class="button">YES</a>
    </li>

</div>
<div class="4">
  <ul>
    <li><a href="http://tinyurl.com/qybshxz" class="button">NO</a>
    </li>
  </ul>
</div>
</div>

#2

Change your css as

改变你的css

.button {
  display: block;
  height: 100px;
  width: 200px;
  background: #ffff00;
  border: 2px solid #00E5EE;
  color: #551A8B;
  text-align: center;
  font: bold 3.2em/100px Impact;
  background: -webkit-linear-gradient(top, #ffff00, #2f5f63);
  background: -moz-linear-gradient(top, #ffff00, #2f5f63);
  background: -o-linear-gradient(top, #ffff00, #2f5f63);
  background: -ms-linear-gradient(top, #ffff00, #2f5f63);
  background: linear-gradient(top, #ffff00, #2f5f63);
  -khtml-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 90px;
  margin: 0px 0px 15px 15px;
}

li {
  list-style: none;
}

div {
  display: inline-block;
}

and HTMl as

和HTMl

<div class="container">
  <div>
    <ul>
      <li><a href="http://www.kbb.com/scion/fr-s/2013/" class="button">YES</a></li>
    </ul>
  </div>
  <div class="2">
    <ul>
      <li><a href="http://tinyurl.com/nk4k25r" class="button">NO</a></li>
    </ul>
  </div>


  <div class="3">
    <ul>
      <li><a href="http://tinyurl.com/pnaj3j2" class="button">YES</a></li>
    </ul>

  </div>
  <div class="4">
    <ul>
      <li><a href="http://tinyurl.com/qybshxz" class="button">NO</a></li>
    </ul>
  </div>
</div>