桌子不会彼此靠近

Question

我正在写简单的html＆amp;网站的CSS。我有一个问题。我有这个登录表单（我知道它不会工作，它只是html和css代码，我不是在编写php并制作这种东西）

<table style="padding-top:5px;" cellpadding="0" cellspacing="0" align="center" width="200"     height="34">
<tr>

<td width="81" height="32"><input class="login-reg" type="button" value="Registrácia"></td>
<td width="37"><input class="login-ok" type="button" value=""></td>
<td width="82"><input class="login-reset" type="button" value="Reset hesla"></td>

</tr>

</table>

和css

.login-ok{
    background-image: url("images/ok.png");
    background-repeat:no-repeat;
    background-color:#00a651;
    border-radius:5px;
    border:1px solid #000;
    height:35px;
    width:35px;
}
.login-reg{
    background-color: #3a3a3a;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
    border:1px solid #000;
    color: #fff;
    height:25px
    padding:0px;
}
.login-reset{
    background-color: #3a3a3a;
    border-top-right-radius:3px;
    border-bottom-right-radius:3px;
    border:1px solid #000;
    color: #fff;
    height:25px
}

我只是想把它组合在一起。就像在这个屏幕上（我知道风格不同，但我需要让它看起来像＃34;一个元素＆＃34;或者我如何描述它）screen

jsfidle如果有人想要jsf example

Answer 1

您可以简单地从输入中删除边距：

.login-reg, .login-reset{
    margin: 0;
}

fiddle

Answer 2

只需删除不必要的边距并折叠表格边框，您就是：

input {
  margin: 0;
}

table {
  border-collapse: collapse;
}

FIDDLE

问候。

Answer 3

你忘记了一些;和宽度做了一点混乱。这工作正常：http://jsbin.com/besebazerobe/1/

.login-ok{
    background-image: url("images/ok.png");
    background-repeat:no-repeat;
    background-color:#00a651;
    border-radius:5px;
    border:1px solid #000;
    height:35px;
    width:100%;
}
.login-reg{
    background-color: #3a3a3a;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
    border:1px solid #000;
    color: #fff;
    height:25px;
    width:100%;
}
.login-reset{
    background-color: #3a3a3a;
    border-top-right-radius:3px;
    border-bottom-right-radius:3px;
    border:1px solid #000;
    color: #fff;
    height:25px;
    width:100%;
}

Answer 4

将宽度添加到.login-reg和.login-reset。 Fiddle

Answer 5

仅使用css尝试此选项：http://jsfiddle.net/csdtesting/7e5uo15u/

#container {
  width: 300px;
  text-align: center;
  margin: 0 auto;
  margin-top: 50px;
}
#left {
  float: left;
  width: 125px;
  height: 20px;
  margin-top: 10px;
  color: white;
  background-color: #101010;
  /* outer shadows  (note the rgba is red, green, blue, alpha) */
  -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
  /* rounded corners */
  -webkit-border-radius: 12px 0px 0px 12px;
  -moz-border-radius: 7px 0px 0px 7px;
  border-radius: 7px 0px 0px 7px;
  /* gradients */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #101010), color-stop(15%, #101010), color-stop(100%, grey));
  background: -moz-linear-gradient(top, #101010 0%, #101010 55%, #grey 130%);
}
#center {
  font-family: FontAwesome;
  display: inline-block;
  margin: 0 auto;
  width: 50px;
  height: 35px;
  font-size: 30px;
  color: #000000;
  /* rounded corners */
  -webkit-border-radius: 12px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  background: #00ff00;
  /* gradients */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, green), color-stop(15%, green), color-stop(100%, grey));
  background: -moz-linear-gradient(top, green 0%, green 55%, #grey 130%);
}
#right {
  float: right;
  width: 125px;
  height: 20px;
  margin-top: 10px;
  background-color: white;
  /* outer shadows  (note the rgba is red, green, blue, alpha) */
  -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
  /* rounded corners */
  -webkit-border-radius: 12px 0px 0px 12px;
  -moz-border-radius: 0px 7px 0px 7px;
  border-radius: 0px 7px 7px 0px;
  color: white;
  /* gradients */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #101010), color-stop(15%, #101010), color-stop(100%, grey));
  background: -moz-linear-gradient(top, #101010 0%, #101010 55%, #grey 130%);
}

<div id="container">
  <div id="left">Registracia</div>
  <div id="center">✔</div>
  <div id="right">Reset Hesla</div>
</div>

希望它有所帮助！