2014-09-25 167 views
0

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

请指导我在哪里我会出错。 我几乎没有编程经验。

谢谢

+0

可以请你加小提琴。太.. – Lal 2014-09-25 17:39:48

+0

[this](http://jsfiddle.net/lalu050/krqhz2a0/)就是你的代码所喜欢的.. – Lal 2014-09-25 17:41:26

+0

你能不能详细说一下。我不知道小提琴是什么? – AlbusDumbeldore 2014-09-25 17:44:31

回答

0

我整理了你的代码。有一些基本的错误(缺少“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> 

小提琴这里:http://jsfiddle.net/uhmhL628/1/

试试这个,看看它是否适合你luc122c

+0

嗨,问题已逆转。标签现在与文本框重叠。在这里添加了一个快照https://www.dropbox.com/s/7igv10w1tl1vxmz/snapshot.png?dl=0 – AlbusDumbeldore 2014-09-25 18:04:39

+0

你可以将你的CSS添加到小提琴中,这可能是一个格式问题。 – luc122c 2014-09-25 22:04:07

+0

嗨,有3个CSS文件。我试图在小提琴中使用tidyUp。链接是http://jsfiddle.net/56b6n85b/; http://jsfiddle.net/bmfecnzd/; http://jsfiddle.net/eary14f5/ 但问题仍然存在。 – AlbusDumbeldore 2014-09-26 06:08:04