Question

我想在div中放置一个输入元素，但由于某种原因，输入元素溢出了div。有什么问题？

http://jsfiddle.net/aklintsevich/p1o584wg/

HTML：

<section class="full" id="third">       
        <div id="contact">
            <form action="#" method="post" id="form">
                <div class="email_info top white_border icomoon">
                    <div id="name_font" class="icon center_text">
                    </div>
                    <div>
                        <input type="text" name="firstname">
                    </div>
                </div>
                <div class="email_info bottom white_border icomoon">
                    <div id="email_font" class="icon center_text">

                    </div>                         
                    <div >
                        <input type="text" name="firstname">
                    </div>                        
                </div>                    
            </form>
        </div>      
</section>

的CSS：

#third{
background-color:#22AFA0;       
}

#contact{       
    background-color:blue;
    margin:0px auto 30px auto;
    position:relative;
    top:30%;
    width:65%;
    height:30%;
    background-color:red;
    }

.email_info{
    height:40%;
    width:45%;
    position:absolute;
    background-color:green;
}

.message{
    position:absolute;
    right:0px;
    height:100%;
    width:45%;
    background-color:green;
}

#message_icon{
    height:40%;
    width:20%;
    background-color:blue;
    border-right:1px solid white;
    border-bottom:1px solid white;
}

#message_icon:before{
    color:white;
    display:block;
    width:100%;
    height:100%;
    text-align:center;
    line-height:80px;
    font-size:2.5em;
    content:"\e610";
}

.text_position{     
    float:right;
    position:absolute;      
}


.top{       
    top:0px;            
}


.bottom{
    bottom:0px;     
}


#form_button{       
    position:relative;
    width:65%;
    height:20%;
    /*background-color:orange;*/
}

.icon{
    width:20%;
    height:100%;
    background-color:blue;
    border-right:1px solid white;

}
.icomoon{
     font-family: 'icomoon';
     speak: none;
     font-style: normal;
     font-weight: normal;
     -webkit-font-smoothing: antialiased;
}

.white_border{      
    border:2px solid white;     
}
.center_text{       
    text-align:center;      
}

#name_font:before{
    font-size:2.5em;
    display:block;
    width:100%;
    height:100%;
    line-height:80px;
    color:white;
    content:"\e611";        
}

#email_font:before{
    font-size:2.5em;
    display:block;
    width:100%;
    height:100%;
    line-height:80px;
    color:white;
    content:"\e60f";        
}

Answer 1

在相关div中将属性'overflow'设置为'auto'。例如，

.email_info{    
    overflow : auto;
}

Answer 2

Divs有一个默认的块显示，因此，要有两个div能够在同一行上排列，你必须将它们声明为inline-block。

.email_info{
    display:inline-block;
}

输入元素溢出div之外

2 个答案: