Html 右边框不显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20813899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Border-right not showing
提问by Greg
would you know why the blue border does not show on the right side of my field? (field has a width of 100%) Many thanks http://jsfiddle.net/KtEdG/
你知道为什么我的字段右侧没有显示蓝色边框吗？（字段的宽度为 100%）非常感谢http://jsfiddle.net/KtEdG/
CSS:
CSS：
.wrapper {
position: relative;
display: block;
margin-right: auto;
margin-left: auto;
width: 1000px;
overflow: hidden;
}
.block {
padding: 20px;
background-clip: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
overflow-y: auto;
overflow-x: hidden;
}
.block-left {
float: left;
box-sizing: border-box;
overflow: hidden;
width: 50%;
}
.block-right {
float: right;
overflow: hidden;
box-sizing: border-box;
width: 50%;
}
/*************************************************************
* CONTACT
*************************************************************/
.contact-form input[type=text] {
float: left;
width: 200px;
}
.contact-form input[type=email] {
float: right;
width: 200px;
}
.contact-form input[type=submit] {
float: right;
margin-top: 8px;
}
.contact-form textarea {
float: left;
margin-top: 20px;
margin-bottom: 10px;
width: 100%;
height: 70px;
overflow: auto;
}
/*************************************************************
/*************************************************************
* FORMS
*************************************************************/
form label {
cursor: pointer;
}
form textarea, form input[type=text], form input[type=password], form input[type=email] {
padding: 6px 8px;
border-top: 1px solid transparent;
border-right: 1px solid #d2d2d2;
border-bottom: 1px solid transparent;
border-left: 1px solid #d2d2d2;
background: #d5d5d5 url('../images/form-bg.png') left top repeat-x;
color: #7c7c7c;
font-family: 'Arial', sans-serif;
resize: none;
}
form input:focus, form textarea:focus {
outline: none;
border: 1px solid #0069BA;
background: #d5d5d5 none;
}
form input[type=submit] {
padding: 8px 50px;
border: 0;
background: #0064C4 url('../images/form-caret.png') right center no-repeat;
color: #fff;
text-transform: uppercase;
font-weight: normal;
font-size: 14px;
font-family: 'Arial', sans-serif;
cursor: pointer;
}
#addressbox {
position: relative;
padding: 10px 0px 0 10px;
margin-bottom: 20px;
}
#addressbox p {
line-height: 14px;
}
#contact li {
display: inline;
padding-right: 5px;
color: #333;
list-style: none;
font-weight: 500;
font-size: 13px;
}
#contact li a {
border-bottom: none;
color: #333;
text-decoration: none;
font-weight: 500;
font-size: 13px;
}
HTML
HTML
<div class="wrapper white-background">
<div class="block">
<div class="block-left">
<div id="addressbox">
<p><strong>fdsfsd</strong></p>
<p>3, rudsfdser</p>
<p> L53ddfsfurg)</p>
<ul id="contact" class="ul-none">
<li><i class="fa fa-phone blue"></i> +352 691 123.456</li>
<li><i class="fa fa-envelope blue"></i> <a href="javascript:sendAnnotatedMailTo('contact','bfdfs','dfsf','Contact via blondiau.lu','')">[email protected]</a></li>
<li><i class="fa fa-map-marker blue"></i><a href="http://goo.gl/I47" target="_blank"> Plan d'accès</a></li>
</ul>
<div class="contactarrow"><img src="images/contact-handwriting.png" alt="contact-handwriting" width="339" height="69"></div></div>
<!-- End DIV addressbox -->
</div>
<!-- End DIV block-left -->
<div class="block-right">
<!-- CONTACT FORM-->
<div class="contact-form">
<form id="contactfrm" method="post" class="clearfix">
<div class="clearfix">
<input id="name" name="name" placeholder="Nom" type="text" value="">
<input id="email" name="email" placeholder="Email" type="email" value="">
</div>
<textarea id="message" name="message" placeholder="Votre message et vos coordonnées"></textarea>
<input type="submit" value="Envoyer" name="submit">
<p class="success" style="display:none">Votre message a bien été envoyé! Merci</p>
<p class="error" style="display:none;">E-mail non valide et/ou message vide</p>
</form>
</div>
<!-- /.contact-form -->
采纳答案by Mr. Alien
Because your textareais overflowing .block-rightand since you are using overflow: hidden;you cannot see the right part of your textarea, you may assign some fixed widthlike
因为你textarea的溢出.block-right并且因为你正在使用overflow: hidden;你看不到你的正确部分textarea，你可以分配一些固定的width像
.contact-form textarea {
float: left;
margin-top: 20px;
margin-bottom: 10px;
width: 462px;
height: 70px;
overflow: auto;
}
Or if you want to stick to width: 100%than you will have to get rid of overflow: hidden;from .block-right
或者，如果你要坚持到width: 100%比你将不得不摆脱overflow: hidden;来自.block-right
Also, you have a lot of CSS, which might not be useful, so code is very much messy in general.
此外，您有很多 CSS，可能没有用，因此代码通常非常混乱。
Also, just noticed, you are using box-sizingproperty but you are not using the prefixed properties, so it will fail in many browsers, so use them
另外，刚刚注意到，您正在使用box-sizing属性但您没有使用前缀属性，因此它会在许多浏览器中失败，因此请使用它们
.block {
padding: 20px;
background-clip: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* Other Properties */
}
回答by Marwelln
The textareais overflowing as Mr. Alien is saying since width:100%+ borderis more then 100% (duh). To include borderand padding"inside" your widthyou can use box-sizing:border-box.
textarea正如外星人先生所说，因为width:100%+border超过 100%（废话），所以溢出了。要包含border和padding“内部”您width可以使用box-sizing:border-box.
Just add box-sizing:border-boxto .contact-form textareaand you'll be fine. More info available on http://css-tricks.com/box-sizing/.
只需添加box-sizing:border-box到.contact-form textarea，你会没事的。更多信息可在http://css-tricks.com/box-sizing/上获得。
