表内容溢出包含DIV

Question

我无法阻止DIV中包含的元素溢出包含的DIV。我无法弄清楚是什么导致了它。我真的很欣赏另一双眼睛。

这是一个显示我遇到问题的jsfiddle：

http://jsfiddle.net/4YAGz/1/

我希望form#user_login_history和table#form_table置于div#app_form

之内

我已经查看了来自谷歌和stackoverflow上的类似帖子的信息，但我无法用提供的信息解决问题。我尝试了块和清晰的CSS样式属性的组合，但它没有帮助。

我的CSS：

body, ul, li {
    font-size:14px; 
    font-family:Arial, Helvetica, sans-serif;
    line-height:21px;
    text-align:left;
}

body{background-color:#F4F4F4;}

#menu {
    list-style:none;
    width:90%;
    margin:30px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;

    /* Rounded Corners */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

    /* Background color and gradients */
    background: #000080;
    background: -moz-linear-gradient(top, #0272a7, #000080);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#000080));

    /* Borders */
    border: 2px solid #0A1B0A;
    -moz-box-shadow:inset 0px 0px 1px #edf9ff;
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
    box-shadow:inset 0px 0px 1px #edf9ff;
    behavior: url("/static_mimansa_apps/js/PIE.htc");
}

#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
}

#menu li:hover {
    border: 1px solid #777777;
    padding: 3px 9px 3px 9px;

    /* Background color and gradients */
    background: #F4F4F4;
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

    /* Rounded corners */
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    behavior: url("/static_mimansa_apps/js/PIE.htc");
}

#menu li a {
    color: #EEEEEE;
    display:block;
    outline:0;
    text-decoration:none;
    text-shadow: 1px 1px 1px #000;
    font-weight:bold;
}

#menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
    padding-right:21px;
    background:url("../images/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
    background:url("../images/drop.png") no-repeat right 7px;
}

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
    margin:4px auto;
    float:left;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #0A1B0A;
    border-top:none;

    /* Gradient background */
    background:#BBEEEE;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

    /* Rounded Corners */
    -moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
    behavior: url("/static_mimansa_apps/js/PIE.htc");
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 320px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
    left:-1px;
    top:auto;
}

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
    display:block;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

#menu .menu_right {
    float:right;
    margin-right:0px;
}
#menu li .align_right {
    /* Rounded Corners */
    -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
    behavior: url("/static_mimansa_apps/js/PIE.htc");
}

#menu li:hover .align_right {
    left:auto;
    right:-1px;
    top:auto;
}

#menu p, #menu h2, #menu h3, #menu ul li {
    line-height:21px;
    text-align:left;
    text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
    font-size:21px;
    font-weight:400;
    letter-spacing:-1px;
    margin:7px 0 14px 0;
    padding-bottom:14px;
    border-bottom:1px solid #666666;
}
#menu h3 {
    margin:7px 0 14px 0;
    padding-bottom:7px;
    border-bottom:1px solid #888888;
}
#menu p {
    line-height:18px;
    margin:0 0 10px 0;
}

#menu li:hover div a {color:#015b86;}

#menu li:hover div a:hover {color:#029feb;}

.strong {font-weight:bold;}

.italic {font-style:italic;}

.imgshadow { /* Better style on light background */
    background:#FFFFFF;
    padding:4px;
    border:1px solid #777777;
    margin-top:5px;
    -moz-box-shadow:0px 0px 5px #666666;
    -webkit-box-shadow:0px 0px 5px #666666;
    box-shadow:0px 0px 5px #666666;
    behavior: url("/static_mimansa_apps/js/PIE.htc");
}
.img_left { /* Image sticks to the left */
    width:auto;
    float:left;
    margin:5px 15px 5px 5px;
}

#menu li .black_box {
    background-color:#333333;
    color: #eeeeee;
    text-shadow: 1px 1px 1px #000;
    padding:4px 6px 4px 6px;

    /* Rounded Corners */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    /* Shadow */
    -webkit-box-shadow:inset 0 0 3px #000000;
    -moz-box-shadow:inset 0 0 3px #000000;
    box-shadow:inset 0 0 3px #000000;
    behavior: url("/static_mimansa_apps/js/PIE.htc");
}

#menu li ul {
    list-style:none;
    padding:0;
    margin:0 0 12px 0;
}
#menu li ul li {
    line-height:24px;
    position:relative;
    text-shadow: 1px 1px 1px #ffffff;
    padding:0;
    margin:0;
    float:none;
    text-align:left;
    width:130px;
}
#menu li ul li:hover {
    background:none;
    border:none;
    padding:0;
    margin:0;
}

#menu li .greybox li {
    background:#F4F4F4;
    border:2px solid #0A1B0A;
    margin:10px auto 4px auto;
    padding:4px 6px 4px 6px;
    width:90%;
    /*width:116px;*/

    /* Rounded Corners */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
#menu li .greybox li:hover {
    background:#ffffff;
    border:3px solid #0A1B0A;
    padding:3px 5px 3px 5px;
    margin:10px auto 4px auto;
}

#menu ul.greybox li a.menu_item{
    font-size:16px; 
    color: #000000;
    display:block;
    outline:0;
    text-decoration:none;
    font-weight:bold;
}

table#dynamic_table,table#dynamic_table th,table#dynamic_table td
{
    border: 3px solid #0A1B0A;
    text-align:center;
    padding:10px;
    border-collapse:collapse;
    margin:20px auto;
}

th
{
    background: #000080;
    font-size:14px; 
    color: #EEEEEE;
}

#app_title
{
    color:#000080;
    text-align:center;
    font-size:22px; 
    margin:15px auto;
}

#app_form, #app_form div
{
    text-align:center;
    margin:15px auto;
    width:65%;
}

#container
{
    border: 3px solid #000080;
    margin:15px auto;
    width:75%;
    /* Rounded Corners */
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
}

.label_cell, .input_cell
{
    margin: 0;
    text-align: left;
    color:#000080;
    font-size:18px; 
}

table#form_table
{
    border: 0px;
    padding:10px;
    margin:15px 20%;
    display:block;
    clear:both;
}
table#form_table td
{
    padding:10px;
}

select,input
{
    width:150px;
}

#logo_container_div
{
    border-style: none;
    text-align:center;
    margin:0px auto;
}

#logo_container
{
    width:80px;
    height:auto;
    margin:20px auto 0px auto;
    align:center;
}
#dialog
{
    text-align:left;
}

.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:5px 10px 5px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
#info, .info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('../images/info.png');
}
#success, .success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('../images/success.png');
}
#warning, .warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('../images/warning.png');
}
#error, .error {
color: #FFFFFF;
background-color: #CE3B19;
background-image: url('../images/error.png');
}

#logout_container
{
    border: none;
    margin:15px auto;
    width:75%;
    text-align:right;
}
#logout_container a
{
    color:#000080;
    font-weight:bold;
    text-decoration:underline;
}
#logout_container a:hover
{   
    text-decoration:none;
}

input.hasDatepicker
{
    background-image: url("../images/datepicker-2.png");
    background-position: right center;
    background-repeat: no-repeat;
}

我的HTML就是这个

<div id="container">
    <h2 id="app_title">Historia Sesiones</h2>
    <div id="logo_container_div"></div> 
    <div id="app_form">
        <form id="user_login_history" action="." method="post"><div style="display:none"><input type="hidden" name="csrfmiddlewaretoken" value="Mu71Bb0F5sH5ml7DgVRICl48x3S3OE04"></div>
            <table id="form_table">
            <tbody><tr>

                <td class="label_cell"><label for="id_login_user_id">Usuario : </label></td>
                <td class="input_cell"><input type="text" name="login_user_id" id="id_login_user_id"></td>          

                <td class="label_cell"><label for="id_from_date">Fecha Desde: </label></td>
                <td class="input_cell"><input readonly="readonly" type="text" name="from_date" id="id_from_date" class="hasDatepicker"></td>            

                <td class="label_cell"><label for="id_to_date">Fecha Hasta: </label></td>
                <td class="input_cell"><input readonly="readonly" type="text" name="to_date" id="id_to_date" class="hasDatepicker"></td>            

            </tr>
            </tbody></table>
            <div id="dynamic_table_holder"></div>
            <div class="spinner" id="spinner" style="display: none;"><img alt="spinner" src="/static_mimansa_apps//images/spinner.gif"></div>
            <input type="button" value="Submit" id="submit_button">
        </form>
        <table id="data_table"></table>
        <div id="dialog"></div>
    </div>

Answer 1

这可能是你想要的东西吗？

http://jsfiddle.net/4YAGz/4/

我将表格改为ul，这样更清晰。

新的HTML是：

<div id="container">
<h2 id="app_title">Historia Sesiones</h2>
<div id="logo_container_div"></div> 
<div id="app_form">
    <ul>
    <form id="user_login_history" action="." method="post">
        <div style="display:none"><input type="hidden" name="csrfmiddlewaretoken" value="Mu71Bb0F5sH5ml7DgVRICl48x3S3OE04"></div>

            <li class="label_cell"><label for="id_login_user_id">Usuario : </label></li>
            <li class="input_cell"><input type="text" name="login_user_id" id="id_login_user_id"></li>          

            <li class="label_cell"><label for="id_from_date">Fecha Desde: </label></li>
            <li class="input_cell"><input readonly="readonly" type="text" name="from_date" id="id_from_date" class="hasDatepicker"></li>            

            <li class="label_cell"><label for="id_to_date">Fecha Hasta: </label></li>
            <li class="input_cell"><input readonly="readonly" type="text" name="to_date" id="id_to_date" class="hasDatepicker"></li>            

        <div id="dynamic_table_holder"></div>
        <div class="spinner" id="spinner" style="display: none;"><img alt="spinner" src="/static_mimansa_apps//images/spinner.gif"></div>
        <input type="button" value="Submit" id="submit_button">
    </form>
    </ul>
    <table id="data_table"></table>
    <div id="dialog"></div>
</div>

并添加此项以删除UL样式：

ul {
    list-style-type: none;
}

Answer 2

我认为这是正常的，因为所有字段都是表格单元格。您应该将所有“label - ＆gt; field”对放入单独的表行中。或者（不推荐）您应该将TD“display”css属性更改为使用浮动而不是table-cell（默认值）＆lt; - 但这是反模式。

Answer 3

您将#container的宽度设置为75％，并且表格无法包裹单元格。您将不得不考虑一种不同的方法来处理它，但这是布局表的缺点之一。

Answer 4

对表使用max-width: 100px; css属性（100px就是一个例子）

table {
  max-width: 100px;
}