如何将这些按钮与CSS放在同一行？

时间：2018-03-27 10:54:39

标签： html css button

我一直致力于这个扩展，我试图将这些按钮放在同一个地方，但它们看起来像这样。他们没有排队

Buttons Don't line Up

＆＃13;
＆＃13; 
.fversion-button {
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: left;
  float: left;
}

.sversion-button {
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: middle;
  float: center;
}

.tversion-button {
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: right;
  float: right;
}
＆＃13; 
<a href="2048/index.html" class="fversion-button">2048</a>
<a href="16384/index.html" class="sversion-button">16384</a>
<a href="65536/index.html" class="tversion-button">65536</a>
＆＃13;
＆＃13;
＆＃13;

我是CSS的新手。

5 个答案:

答案 0 :(得分：0)

没有CSS 喜欢

  

float：center

  • 用 .sversion-button 类编写。你应该用
    • 替换它
  

浮动：离开。

我认为按钮位于您想要的正确位置。

答案 1 :(得分：0)

我会放弃使用float并使它们成为内联块元素。此外，删除垂直对齐 - 或将它们全部放在中间（左和右不是垂直对齐的有效值）

.fversion-button {
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: middle;
  display:inline-block;
}

.sversion-button {
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: middle;
  display:inline-block;
}

.tversion-button {
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: middle;
  display:inline-block;
}
<a href="2048/index.html" class="fversion-button">2048</a>
<a href="16384/index.html" class="sversion-button">16384</a>
<a href="65536/index.html" class="tversion-button">65536</a>

如果您需要将它们分开，可以将它们放在Flex容器中：

.container {                         /* flex for even spacing */
  display: flex;
  justify-content: space-between;
}

/* shared styles - could use a class on each button for shared styles instead of repeating (i have just used the extra selector I made from the container) */
.container > a {  
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);  
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;                 
<div class="container">
  <a href="2048/index.html" class="fversion-button">2048</a>
  <a href="16384/index.html" class="sversion-button">16384</a>
  <a href="65536/index.html" class="tversion-button">65536</a>
</div>

答案 2 :(得分：0)

你需要移除浮动中心并在html和css中制作chnages，你会得到这个

＆＃13;
＆＃13; 
.fl1{
  float:left;
  width:33.33%;
  margin:5px auto;
}
.fl2{
  float:left;
  width:33.33%;
  text-align:center;
  margin:5px auto;
}
.fl3{
  float:left;
  width:33.33%;
  text-align:right;
  margin:5px auto;
}
.fversion-button {
     border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;


color: #ffffff;
   text-decoration: none;
   vertical-align: middle;
   }


.sversion-button {
    border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   color: #ffffff;


   text-decoration: none;
   vertical-align: middle;
   }  


.tversion-button {
    border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   color: #ffffff;


   text-decoration: none;
   vertical-align: right;
}
＆＃13; 
<div class="fl1">
<a href="2048/index.html" class="fversion-button">2048</a>
</div>
<div class="fl2">
       <a href="16384/index.html" class="sversion-button">16384</a>
</div>
<div class="fl3">
   <a href="65536/index.html" class="tversion-button">65536</a>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

为标记display:inline-block;添加a并将所有按钮设置为float:left 

a{
  display:inline-block;
}
.fversion-button {
     border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;


color: #ffffff;
   text-decoration: none;
   vertical-align: left;
   float: left;
   }


.sversion-button {
    border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   color: #ffffff;


   text-decoration: none;
   vertical-align: middle;
   float: left;
   }  


.tversion-button {
    border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   color: #ffffff;


   text-decoration: none;
   vertical-align: right;
   float: left;
}
<a href="2048/index.html" class="fversion-button">2048</a>
       <a href="16384/index.html" class="sversion-button">16384</a>
   <a href="65536/index.html" class="tversion-button">65536</a>

答案 4 :(得分：0)

＆＃13;
＆＃13; 
/* Replace all css with this one css for all buttons */

.demo_btn {
   border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   color: #ffffff;
   text-decoration: none;
   vertical-align: middle;
   display: inline-block;
}
＆＃13; 
<!-- Add common class to all buttons -->

<a href="2048/index.html" class="fversion-button demo_btn">2048</a>
<a href="16384/index.html" class="sversion-button demo_btn">16384</a>
<a href="65536/index.html" class="tversion-button demo_btn">65536</a>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题