Таблицы не будут близко друг к другу

Question

Я пишу простой html & 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 
} 

И я просто хочу сделать это вместе. Как и на этом экране (я знаю стиль отличается, но мне нужно сделать это выглядит как «один элемент» или, как я могу это описать) screen

jsfidle если кто-то хочет jsf example

Answer 1

Вы забыли некоторые; и сделал немного беспорядка с шириной. Это работает: 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 2

Вы можете просто Маржа удалить из входов :

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

fiddle

Answer 3

Просто удалите ненужные поля и коллапс границ таблицы, здесь вы:

input { 
    margin: 0; 
} 

table { 
    border-collapse: collapse; 
} 

FIDDLE

С уважением.

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>

Надеюсь, что это помогает!