Question

HTML：

<div class="parent">
<div>
         <a href="">First Page</a><a href="">Second Page</a><a href="">Third Page</a>
</div>
</div>

的CSS：

div.parent > div > a {
margin-right: 2em;              
}
div.parent {
border: 1px solid red;
height: 100px;
background-color: #bbb;
}
div.parent > div {
border: 1px solid lightblue;
background-color: #fff;

height: 40px;
width: 900px;

display: block;
float: default;
margin: 0 auto 0;
}

<小时/> 示例：

样式表的结果可以在JSFiddle上看到：http://jsfiddle.net/BMEXR/2/

注意：设置颜色和间距是为了更好地区分。

div aligned如何middle以及relative parent div如何？那么relative会height setting移动到parent div的{{1}}吗？

Answer 1

如果您不介意某些标记更改： http://jsfiddle.net/BMEXR/30/

HTML：

<div class="parent">
    <div class="childContainer">
        <div class="childContents">
             <a href="">First Page</a><a href="">Second Page</a><a href="">Third Page</a>
        </div>
    </div>
</div>

CSS：

div.childContents a {
   margin-right: 2em;              
}
div.childContents{
   background-color:white;
   height: 25px;
   width: 900px;    
}
div.parent {
   border: 1px solid red;
   height: 100px;
   background-color: #bbb;
   display:table-row;
}
div.childContainer {
   border: 1px solid lightblue;
   background-color: transparent;
   vertical-align:middle;
   display: table-cell;
}

Answer 2

也许你可以尝试使用jQuery：http://jsfiddle.net/BMEXR/32/

<强> HTML：

<div class="parent">
    <div class="container">
        <ul>
            <a href="">First Page</a> | <a href="">Second Page</a> | <a href="">Third Page</a>
        </ul>
    </div>
</div>

<强> CSS：

div.parent {
    border: 1px solid red;
    height: auto;
    background-color: #bbb;
    text-align: center;
    padding: 5px;
}

div.container {
    margin: 0 auto;
    border: 1px solid lightblue;
}

<强> JS：

$(function() {
    var aSize = $('a').size();
    var aTotalSize = 0;

    for(var i = 0; i < aSize; i++) {
        aTotalSize += $('a').eq(i).width()+10;
    }
    $('.container').width(aTotalSize);
});

如何将Div与中间对齐，以及相对于父Div？

2 个答案: