Css 表内容从包含DIV溢出

我在防止DIV中包含的元素溢出包含的DIV时遇到问题。我无法找出是什么导致它。我真的很想再看一眼

下面是一个JSFIDLE，它显示了我遇到的问题：

我希望

form#user#u login_history

和

table#form#u table

在

div#app#u 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>

塞西奥尼斯历史酒店
乌萨里奥：
Fecha Desde：
费查·哈斯塔：

我认为这是正常的，因为所有字段都是表格单元格。您应该将所有“标签->字段”对放在单独的表行中。或者（不建议这样做）您应该将TD“display”css属性更改为block with floating而不是table cell（默认设置）这可能是您想要的

我把桌子换成了一个

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>

---

将#容器的宽度设置为75%，并且表格无法环绕单元格。你必须想一种不同的方法来处理这个问题，但这是用于布局的表格的缺点之一。

使用

最大宽度：100px表格的css属性（例如100px）

为什么在表单布局中使用表？如果可能的话，还应该考虑简化HTML结构。将输入字段调整为“@ VimalStan”，谢谢您的响应。我使用table对表单字段元素进行适当的格式化布局，例如，如果您看到此图像，我可以实现表单字段标签和相应输入字段的正确对齐。在这种情况下，每个标签和输入字段的组合都是一个。只有当我希望所有字段（标签+输入）都在同一行（在同一行中，而不是在多个字段中）时，才会出现此问题。请建议是否有方法在没有表格的情况下实现此目的。请通过。谢谢@VimalStan，我将尝试完全删除表格。您可能忘记保存小提琴或发布了错误的URL。我仍然看到了原始代码。Hi@limelights感谢您的回复。这是非常接近。请注意，我需要标签和相应的输入字段在同一行上。两者的组合（标签+输入线）应水平居中对齐。我尝试将标签和输入都放在
中，但水平居中对齐的部分不起作用。你能指导一下吗？@Guddu是的，当然，给你：-为了简洁，我去掉了很多css（在这个例子中更短），所以如果你想复制和粘贴，你必须把它加回去。Hi@limelights接近我所需要的，但是有一个小问题。我在表单布局中使用表格的原因是让标签和输入字段从同一页边距开始，以便看起来整齐对齐。这是我使用表格时的布局图。在没有表格和进行更改的情况下，居中水平对齐是可以的，但每个标签（和输入字段）从不同的水平位置开始。图像位于。有没有一种方法可以让它们在相同的左边距上相互对齐？Hi@limelights接近我所需要的。但有一个小问题。我在表单布局中使用表格的原因是让标签和输入字段从同一页边距开始，以便看起来整齐对齐。这是我使用表格时的布局图。在没有表格和进行更改的情况下，它们都是水平居中对齐的，但每个标签（和输入字段）从不同的水平位置开始。图片位于。有没有办法让它们在相同的左边缘对齐？
ul {
    list-style-type: none;
}

table {
  max-width: 100px;
}