Question

我有两个divs -r-left-checks和sr-right-checks。它们都包含无序列表。左边是浮动的。我无法弄清楚如何格式化列表的缩进。左边的那个稍微向右缩进，然后是右边的列表。 margin或padding对右侧的列表元素没有影响。我希望他们平等排队。

CSS：

#content{
    width: 553px;
    padding:2px;
    margin: 0 auto;
    font-family: helvetica;
    font-size: 12.9px;
    line-height: 21px;
}


#center-content{
    padding:0px 15px;

}


#sr-left-checks{
    float: left;
    margin-left: 5px; /*why is this working*/
    margin-top: 20px;
    width: 279px;

}
#sr-right-checks{
    margin-right: 5px;
    margin-top: 20px;
    margin-left: 5px;
}

#sr-left-checks ul{
     margin: 9px 2px;
    padding: 0;
}

#sr-right-checks ul{
     margin: 9px 2px; /*not adding margin*/
    padding: 0;
}


#form-block{
    position:relative;

}

标记：

<div id="content">

            <!--Center Content Div Starts -->

            <div id="center-content">


                <div id="form-block">


                        <!--Left Column Questions  Starts -->

                        <div id="sr-left-checks">


                            <div>

                                <div id="sr-dest-block" >question block</div>

                                <ul id="send-receive-destination">

                                    <li><input type="radio" name="dest" value="Internal" >Internal</li>

                                    <li><input type="radio" name="dest" value="External" >External</li>

                                </ul> 

                            </div>  

                            <div>

                                <div id="sr-frequency-block">question block</div>

                                <ul id="send-receive-frequency">

                                    <li><input type="radio" name="radFrequency" value="One time">One Time(Ad-hoc)</li>

                                    <li><input type="radio" name="radFrequency" value="Regularly">Regularly</li>

                                </ul> 

                            </div>  

                        </div>

                        <!--Left Column Questions  Ends -->


                        <!--Right Column Checks starts-->

                        <div id="sr-right-checks">

                            <div>

                                <div id="sr-datatype-block">question block</div>

                                <ul id="send-receive-datatype">

                                    <li><input type="radio" name="radDataType" value="Email content withouth attachment">Email</li>

                                    <li><input type="radio" name="radDataType" value="Email content withouth attachment">Email</li>

                                    <li><input type="radio" name="radDataType" value="Documents">Document</li>

                                    <li><input type="radio" name="radDataType" value="Custom Content">Custom content</li>

                                </ul> 

                            </div> 
                        </div>
                    </div>

                </div>                  
            </div>

Answer 1

要显示最新情况，请将其添加到css

div{ border:red 1pt solid; }

更改#sr-right-checks

#sr-right-checks{

    background:blue;

    margin-right: 5px;
    margin-top: 20px;
    margin-left:300px; /* is measured relative to the parent div */
}

http://jsfiddle.net/GsLMv/3/

浮动div中的格式列表

1 个答案: