为什么这个div完全破碎？

我不知道这是怎么回事。在div中包含一个表单，并且div具有背景颜色。为什么这个div完全破碎？

它适用于我的网站的一部分，但在另一部分根本不起作用。下面是什么在

而且受影响的代码张贴在这里去的Jsfiddle：

form { 
 
    text-align: center; 
 
} 
 

 
input { 
 
    font-family: 'Cabin', sans-serif; 
 
} 
 

 
.submit-button { 
 
    text-decoration: none; 
 
    width: 80%; 
 
    background-color: white; 
 
    text-align: center; 
 
    height: 35px; 
 
    border-radius: 10px; 
 
    display: inline-block; 
 

 
} 
 

 
.input-half { 
 
    width: 40%; 
 
    display: inline-block; 
 
    float: left; 
 
    margin-left: 5%; 
 
    margin-right: 5%; 
 
} 
 

 
.input-half-2 { 
 
    width: 40%; 
 
    display: inline-block; 
 
    float: right; 
 
    margin-left: 5%; 
 
    margin-right: 5%; 
 
} 
 

 
input[type=text]:focus { 
 
    background-color: lightblue; 
 
} 
 

 

 
.contact-contain { 
 
    background-color: lightgray; 
 
    max-width: 100%; 
 
} 
 

 
.image-back { 
 
    width: 100%; 
 
} 
 

 
#back-img { 
 
    width: 100% 
 
} 
 

 
.cont-textarea { 
 
    resize: none; 
 
    width: 80%; 
 
    height: 110px; 
 
}

<div class="contact-contain" id="link-c"><br> 
 
    <h1>Contact Over The Horizon:</h1><br><br> 
 
    <form> 
 
    <div class="input-half"> 
 
     <label for="contname">Your Name</label><br> 
 
     <input class="input-box" type="text" name="contname"><br> 
 
     <label for="eaddress">Your Email</label><br> 
 
     <input class="input-box" type="text" name="eaddress"><br> 
 
     <label for="subj">Message Subject</label><br> 
 
     <input class="input-box" type="text" name="subj"> 
 
    </div> 
 
    <div class="input-half-2"> 
 
     <label for="contactmsg">Message Content</label><br><br> 
 
     <textarea class="cont-textarea"></textarea><br><br> 
 
     <button class="submit-button" type="submit" name="submitq" value="Send"><span>Submit Quote</span></button><br> 
 
    </div> 
 
    </form> 
 
</div><br>

来源

2016-08-17 Zach Curtis

你的问题根本不清楚。这里“完全破碎”和“不起作用”是什么意思？ – isherwood

仅供参考，最好使用填充和边距来创建空间，而不是抛出一堆'br'标签。 '
'使得修订稍后*更加困难和耗时。 – Scott

大胆猜测：您希望您的div包含表单（具有零高度）。这样做：

.contact-contain { 
    overflow: hidden; 
}

Demo

来源

2016-08-17 19:20:16 isherwood

如果一个窗体没有高度时，窗体的高度如何？这工作，但我不明白为什么它的工作。 –

@ZachCurtis如果您打开浏览器的开发人员工具，并将鼠标悬停在开启了元素高亮显示的'

给“clearfix”一个Google。这是浮动和其他元素的常见问题。 SO上有几十亿个这样的问题。 – isherwood

相信我，你将会得到随着时间的推移更好，但我认为，要实现你愿意，你可以简单地设置一个自定义的车身背景颜色这样

什么

body {background-color: lightgray;}

你应该很好

来源

2016-08-17 19:25:02

这假设OP希望整个页面都是彩色的。这不是一个安全的赌注。 – isherwood

其实提问者看起来像是一个初学者，所以我不认为用新的东西来混淆他是个好主意，所以他不会以错误的方式使用它，我这样说是因为我也是初学者。但无论如何，你是非常正确的！ –

为什么这个div完全破碎？

回答

相关问题