表格内联和水平与图像

我想编程一个混合形式，水平和内联，与图像，但我的bootstrap不帮我。表格内联和水平与图像

以下是我有：

下面是我想：

最后，代码：

<form class='form-horizontal' method='post' enctype="multipart/form-data"> 
       <div class='form-group'> 
        <label for='foto' class='sr-only'>Foto</label> 
        <img class='fotoassociado' src='../../<?php if($sqlcmd->Foto == '') {echo 'photos/no_photo.jpg';} else {echo $sqlcmd->Foto;} ?>' /> 
        <input type='file' class='form-control' name='foto' id='foto' /> 
       </div> 
       <div class='form-group'> 
        <label for='nome' class='sr-only'>Nome</label> 
        <input type='text' class='form-control' name='nome' id='nome' value='<?php echo $sqlcmd->Nome; ?>' /> 
       </div> 
       <div class='form-group'> 
        <label for='email' class='sr-only'>E-mail</label> 
        <input type='email' class='form-control' name='email' id='email' value='<?php echo $sqlcmd->Email; ?>' /> 
       </div> 
       <div class='form-group'> 
        <label for='rg' class='sr-only'>RG</label> 
        <input type='rg' class='form-control rg' name='rg' id='rg' value='<?php echo $sqlcmd->RG; ?>' /> 
       </div> 
       <div class='form-group'> 
        <label for='cpf' class='sr-only'>CPF</label> 
        <input type='cpf' class='form-control cpf' name='cpf' id='cpf' value='<?php echo $sqlcmd->CPF; ?>' /> 
       </div> 
       <div class='form-group'> 
        <label for='TelRes' class='sr-only'>Residencial</label> 
        <input type='text' class='form-control' name='TelRes' id='TelRes' value='<?php echo $sqlcmd->TelResidencial; ?>' /> 
       </div> 
       <div class='form-group'> 
        <label for='TelCom' class='sr-only'>Comercial</label> 
        <input type='text' class='form-control' name='TelCom' id='TelCom' value='<?php echo $sqlcmd->TelComercial; ?>' /> 
       </div> 
       <div class='form-group'> 
        <label for='TelCel' class='sr-only'>Celular</label> 
        <input type='text' class='form-control' name='TelCel' id='TelCel' value='<?php echo $sqlcmd->TelCelular; ?>' /> 
       </div> 
      </form>

来源

2016-09-26 Gabriel Silva

form.form-horizontal { 
 
    float: right; 
 
    width: 83%; 
 
}

<head> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
     </head> <body> 
 
    <img class='fotoassociado' src='https://s3.amazonaws.com/cloud.ohloh.net/attachments/72914/favicon_med.png' /> 
 
<form class='form-horizontal' method='post' enctype="multipart/form-data"> 
 
       <div class='form-group' style="width: 80%;"> 
 
        <label for='foto' class='sr-only'>Foto</label> 
 
        <input type='file' class='form-control' name='foto' id='foto' /> 
 
       </div> 
 
       <div class='form-group'style="width: 80%;"> 
 
        <label for='nome' class='sr-only'>Nome</label> 
 
        <input type='text' class='form-control' name='nome' id='nome' value='name' /> 
 
       </div> 
 
       <div class='form-group'style="width: 40%;display: -webkit-inline-box;"> 
 
        <label for='email' class='sr-only'>E-mail</label> 
 
        <input type='email' class='form-control' name='email' id='email' value='Email' /> 
 
       </div> 
 
       <div class='form-group' style="width: 40%;display: -webkit-inline-box;"> 
 
        <label for='rg' class='sr-only'>RG</label> 
 
        <input type='rg' class='form-control rg' name='rg' id='rg' value='RG' /> 
 
       </div> 
 
       <div class='form-group' style="width: 30%;display: -webkit-inline-box;"> 
 
        <label for='cpf' class='sr-only'>CPF</label> 
 
        <input type='cpf' class='form-control cpf' name='cpf' id='cpf' value='cpf' /> 
 
       </div> 
 
       <div class='form-group' style="width: 30%;display: -webkit-inline-box;"> 
 
        <label for='TelRes' class='sr-only'>Residencial</label> 
 
        <input type='text' class='form-control' name='TelRes' id='TelRes' value='TEl' /> 
 
       </div> 
 
       <div class='form-group' style="width: 30%;display: -webkit-inline-box;"> 
 
        <label for='TelCom' class='sr-only'>Comercial</label> 
 
        <input type='text' class='form-control' name='TelCom' id='TelCom' value='telc' /> 
 
       </div> 
 
       <div class='form-group'> 
 
        <label for='TelCel' class='sr-only'>Celular</label> 
 
        <input type='text' class='form-control' name='TelCel' id='TelCel' value='telcal' /> 
 
       </div> 
 
      </form> 
 
</body>

来源

2016-09-26 21:01:42

帮助！谢谢！ –

尝试有，图像和您想要的内标标签<span> This可能有帮助。

来源

2016-09-26 20:36:16 OSMadeIT

试着浮动图像。例如：

.fotoassociado { 
    float: left; 
}

或者，如果你想要的是整个表单组，那么你将会把那整个DIV浮动离开，通过选择第一种形式，组...

.form-group:first-of-type { 
    float: left; 
}

或加入一个额外的班级。

<div class='form-group float-left'> 

.float-left { 
    float: left; 
}

来源

2016-09-26 20:40:46 theJoi

表格内联和水平与图像

回答

相关问题