Question

我需要将两个li组合在一起，这样如果组中任何一个li（Field7）的高度增加，那么另一个（Field6）的高度也应该增加（不是其内容：标签，输入），影响其他li元素的高度（filed1,9,10，...等）。截至目前，我已实施（见图）如下：

HTML：

    <div id="fld_grp">
    <div class="hd"><h3>Field Group1</h3></div>
    <ul>
    <div class="row">
        <li>
            <label>Field1</label>
            <input type="text">
        </li>
        <li>
            <label>Field2</label>
            <input type="text">
        </li>
    </div>
    <div class="row">
        <li>
            <label>Field3</label>
            <input type="text">
        </li>
        <li>
            <label>Field4</label>
            <input type="text">
        </li>
    </div>
    <div class="row">
        <li class="dbl">
            <label>Field5(full field)</label>
            <input type="text">
        </li>
    </div>
    <div class="row">
        <li>
            <label>Field6</label>
            <input type="text">
        </li>
        <li>
            <label>Field7:This Long Label is really very long!</label>
            <input type="text">
        </li>
    </div>
    <div class="row">
        <li>
            <label>Field8</label>
            <input type="text">
        </li>
        <li>
            <label>Field9</label>
            <input type="text">
        </li>
    </div>
    <div class="row">
        <li class="dbl">
            <label>Field10(full field)</label>
            <input type="text">
        </li>
    </div>
    </ul>
  </div>

和


CSS:

        #fld_grp{
        margin: 5px;
        border: 1px solid #008e9c;
        height:auto;
        overflow: hidden;
        padding-bottom: 10px;
        }
        #fld_grp div.row{
        display: table-row;
        height: auto;
        overflow: hidden;
          }
       #fld_grp .hd{
        padding-left: 5px; 
        line-height: 25px; 
        background: #008e9c; 
        color: #FFF; 
        font-weight: 500; 
        font-size:14px;
        }
      #fld_grp ul{
        clear:left;
        list-style-type:none;
        margin:0;
        padding:0;
        text-align:left;
        display: table;
           }
       #fld_grp ul li{
        width: 463px;
        margin: 5px;
        height: auto;
        min-height: 30px;
        float:left;
        list-style:none;
        background: rgba(0,0,0,0.1);
           }
       #fld_grp ul li.dbl{
        width: 935px;
       }
       #fld_grp ul li label{
        width: 50%;
        background: rgb(255, 235, 205);
        display: block;
        padding: 5px 10px;
        float:left;
        counter-reset:sub-section;
       }
       #fld_grp ul li label:before{
        counter-increment:section;
        content:counter(section) ". ";
       }
      #fld_grp ul li input{
        text-align: start;
            width: 170px;
        height: 20px;
            margin: 2px 15px 0 20px;
        background: none repeat scroll 0 0 transparent;
            border: 1px dashed rgba(255, 228, 196, 0.7);
        cursor: text;
       }
      #fld_grp ul li input:hover{
        border: 1px solid  rgba(255, 228, 196, 0.7);
      }
      #fld_grp ul li input:focus{
        background: antiquewhite;
        border: 2px solid rgba(127, 255, 212, 0.7);
      }

但是这是使用HTML5，因为HTML4.01中的ul / ol不支持/允许div eclipsse显示太多警告（我以超过100个输入字段的格式）。我需要摆脱那些警告，使W3C符合HTML4.01标准。此外，我注定要在IE7上运行.. :(

我希望有人能够解决问题，或者至少指出更好的解决方案。感谢。

enter image description here

安德鲁的建议之后：解决问题的CSS：

#fld_grp{
    margin: 5px;
    border: 1px solid #008e9c;
    height:auto;
    overflow: hidden;
    padding-bottom: 10px;
}
#fld_grp .hd{
    padding-left: 5px; 
    line-height: 25px; 
    background: #008e9c; 
    color: #FFF; 
    font-weight: 500; 
    font-size:14px;
    }
#fld_grp ul{
    clear:left;
    list-style-type:none;
    margin:0;
    padding:0;
    text-align:left;
    word-wrap: break-word;
}
#fld_grp ul li{
    width:932px;
    margin: 5px;
    height: auto;
    min-height: 35px;
    float:left;
    list-style:none;
    background: rgba(0,0,0,0.1);
    border:1px dashed #8B4513;
    display:table;
}
#fld_grp ul li > div{
    width:466px;
    background:green;
    display:table-cell;
    height:auto;
    min-height:35px;
    float:left;
}
#fld_grp ul li > div label{
    width: 50%;
    background: rgb(255, 235, 205);
    display: block;
    padding: 8px 10px;
    float:left;
}
#fld_grp ul li > div input{
    text-align: start;
    height: 20px;
    margin: 2px 15px 0 20px;
    background: none repeat scroll 0 0 transparent;
    border: 1px dashed rgba(255, 228, 196, 0.7);
    cursor: text;
}
#fld_grp ul li> div.dbl{
    width: 932px;
}

结果： Solved!!

Answer 1

更改标记。

每行使用一个li，行中每个列使用一个div。

<ul>
    <li class="clearfix">
        <div>
            <label>Field1</label>
            <input type="text">
        </div>
        <div>
            <label>Field1</label>
            <input type="text">
        </div>
    </li>
</ul>

然后你可以漂浮你的div，并使它们50％得到两列。然后，您需要对您的li应用clearfix，但强制它们包装div

制作两列<li>宽度自动高度调整（IE7，HTML 4.01）</li>

1 个答案: