文章/答案/技术大牛

发布

社区首页 >问答首页 >用图像形成内嵌和水平

问用图像形成内嵌和水平
EN

Stack Overflow用户

提问于 2016-09-26 20:23:02

回答 3查看 1.1K关注 0票数 1

我试图用一个图像来编程一个混合形式，水平和内联，但是我的引导没有帮助我。

以下是我所拥有的：

我想要的是：

最后，守则：

<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>

html

css

twitter-bootstrap

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-09-26 21:01:42

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>

票数 1

Stack Overflow用户

发布于 2016-09-26 20:36:16

尝试使用<span> This标签下的图像和您想要内联的标签可能会有所帮助。

票数 0

Stack Overflow用户

发布于 2016-09-26 20:40:46

试着浮动图像。例如：

.fotoassociado {
    float: left;
}

或者，如果您想要整个表单组，那么您将使整个div浮动左边，通过选择第一个窗体组.

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

或者添加一个额外的类。

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

.float-left {
    float: left;
 }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39711749

复制

相似问题

问用图像形成内嵌和水平
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用图像形成内嵌和水平EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用图像形成内嵌和水平
EN