右边框不显示

Posted 2023-05-07

【中文标题】右边框不显示

【英文标题】：Border-right not showing

【发布时间】：2014-01-15 19:48:13

【问题描述】：

您知道为什么我的字段右侧没有显示蓝色边框吗？ （字段宽度为 100%）非常感谢http://jsfiddle.net/KtEdG/

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

<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','')">[e-mail]</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"   ></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 --> 

【问题讨论】：

能否请您删除不相关的 CSS 规则和 HTML？梳理所有代码有点困难。

【参考方案1】：

因为您的textarea 溢出了.block-right，并且由于您使用的是overflow: hidden;，所以您看不到textarea 的正确部分，您可以分配一些固定的width 喜欢

.contact-form textarea 
    float: left;
    margin-top: 20px;
    margin-bottom: 10px;
    width: 462px;
    height: 70px;
    overflow: auto;

Demo

或者，如果您想坚持使用width: 100%，则必须从.block-right 中删除overflow: hidden;

Demo 2

另外，你有很多 CSS，可能没用，所以代码通常非常混乱。

---

另外，刚刚注意到，您使用的是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 */

Demo

【讨论】：

非常感谢。我喜欢演示 2。但是你知道为什么现在电子邮件字段的右侧与消息字段没有右对齐吗？ （似乎消息字段向右移动了几个像素，即使两者都有浮动右）？非常感谢

@Greg 不要以错误的方式理解它，但你的 CSS 搞砸了，学习 CSS 定位，我已经解释过 here 并了解浮动是如何工作的，我已经解释过 @ 987654325@ 你会得到干净的 CSS，你的代码很脏:)

@Greg 哎呀，提供了错误的定位链接，给你 - ***.com/questions/20718577/…

【参考方案2】：

正如 Alien 先生所说，textarea 溢出了，因为 width:100% + border 超过 100% (duh)。要将border 和padding“包含在”您的width 中，您可以使用box-sizing:border-box。

只需将box-sizing:border-box 添加到.contact-form textarea 即可。更多信息请访问http://css-tricks.com/box-sizing/。