html - 文本框重叠标签

Question

我从 startbootstrap.com 下载了一个主题并尝试使用下拉列表添加登录框(代码来自 bootswatch 。 问题 我遇到的是，文本框与文本标签重叠 & 虽然我已经尝试更改几乎所有 div 的宽度，但未能解决问题。

代码是:

<form class="form-horizontal">
    <fieldset style="width : 450px" ;>
        <div class="form-group" style="width:400px";>
            <label for="inputEmail" class="col-lg-2 control-label" width="100px" >Email</label>
                <div class="col-lg-10"  sytle="width : 60px";>
                    <input type="text" class="form-control" id="inputEmail"   placeholder="Email"  style="cursor: auto; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsPDhss3LcOZQAAAU5JREFUOMvdkzFLA0EQhd/bO7iIYmklaCUopLAQA6KNaawt9BeIgnUwLHPJRchfEBR7CyGWgiDY2SlIQBT/gDaCoGDudiy8SLwkBiwz1c7y+GZ25i0wnFEqlSZFZKGdi8iiiOR7aU32QkR2c7ncPcljAARAkgckb8IwrGf1fg/oJ8lRAHkR2VDVmOQ8AKjqY1bMHgCGYXhFchnAg6omJGcBXEZRtNoXYK2dMsaMt1qtD9/3p40x5yS9tHICYF1Vn0mOxXH8Uq/Xb389wff9PQDbQRB0t/QNOiPZ1h4B2MoO0fxnYz8dOOcOVbWhqq8kJzzPa3RAXZIkawCenHMjJN/+GiIqlcoFgKKq3pEMAMwAuCa5VK1W3SAfbAIopum+cy5KzwXn3M5AI6XVYlVt1mq1U8/zTlS1CeC9j2+6o1wuz1lrVzpWXLDWTg3pz/0CQnd2Jos49xUAAAAASUVORK5CYII=); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat; width:150px" ;>
                </div>
        </div>
        <div class="form-group" style="width:400px"; >
            <label for="inputPassword" class="col-lg-2 control-label" width="100px" >Password</label>
                <div class="col-lg-10">
                    <input type="password" class="form-control" id="inputPassword"  placeholder="Password" autocomplete="off" style="cursor: auto; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsPDhss3LcOZQAAAU5JREFUOMvdkzFLA0EQhd/bO7iIYmklaCUopLAQA6KNaawt9BeIgnUwLHPJRchfEBR7CyGWgiDY2SlIQBT/gDaCoGDudiy8SLwkBiwz1c7y+GZ25i0wnFEqlSZFZKGdi8iiiOR7aU32QkR2c7ncPcljAARAkgckb8IwrGf1fg/oJ8lRAHkR2VDVmOQ8AKjqY1bMHgCGYXhFchnAg6omJGcBXEZRtNoXYK2dMsaMt1qtD9/3p40x5yS9tHICYF1Vn0mOxXH8Uq/Xb389wff9PQDbQRB0t/QNOiPZ1h4B2MoO0fxnYz8dOOcOVbWhqq8kJzzPa3RAXZIkawCenHMjJN/+GiIqlcoFgKKq3pEMAMwAuCa5VK1W3SAfbAIopum+cy5KzwXn3M5AI6XVYlVt1mq1U8/zTlS1CeC9j2+6o1wuz1lrVzpWXLDWTg3pz/0CQnd2Jos49xUAAAAASUVORK5CYII=); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat; width:150px ; ;>
                </div>
        </div>
        <div class="form-group">
            <div class="col-lg-10 col-lg-offset-2">
                <button type="submit" class="btn btn-primary" >Submit</button>
            </div>
        </div>
    </fieldset>
</form>

请指导我哪里出错了。 我的编程经验很少。

谢谢

Answer 1

我整理了你的代码。存在一些基本错误(缺少 "s 和/s)。

<form class="form-horizontal">
<fieldset style="width : 450px">
    <label style="display:block;" for="inputEmail" class="col-lg-2 control-label" width="100px">Email</label>
    <input type="text" class="form-control" id="inputEmail" placeholder="Email" style="cursor: auto; background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat; width:150px;" />

    <label style="display:block;" for="inputPassword" class="col-lg-2 control-label" width="100px">Password</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Password" autocomplete="off" style="cursor: auto; background-attachment: scroll; display:block; background-position: 100% 50%; background-repeat: no-repeat; width:150px;" />
    <button style="display:block;" type="submit" class="btn-primary">Submit</button>
</fieldset>

在这里 fiddle :http://jsfiddle.net/uhmhL628/1/

试试这个，看看它是否适合你。 luc122c