Question

在下面的代码中，我想将内容div中的文本（右边的那个）对齐，靠近边框，离导航菜单不远我知道这是由于我的导航菜单向左浮动，但我无法做到!!!!!

                <div style="position:relative; top:10px; float:left; border: 1px blue dashed; width:150px">
                <ul>
                    <li style="margin-top:2px; padding-bottom:15px; list-style-type:none"><a href="index.html">Home</a></li>
                    <li style="margin-top:2px; padding-bottom:15px; list-style-type:none"><a href="Listings.html">Listings</a></li>
                    <li style="margin-top:2px; padding-bottom:15px; list-style-type:none"><a href="Financing.html">Financing</a></li>
                    <li style="margin-top:2px; padding-bottom:15px; list-style-type:none"><a href="contact.html">Contact</a></li>
                </ul>
            </div>
            <div style="position:relative; top:10px; border: 1px red dashed; left:155px; width:800px; min-height:600px">
                test
            </div>

Answer 1

就像Khanh Tran提到的那样，你可以删除“left：155px;”从你的内容div，但这将影响你的边界落在哪里。你可以做的就是将同样的div浮动到左边。

所以，改变一下：

<div style="position:relative; top:10px; border: 1px red dashed; left:155px; width:800px; min-height:600px">test</div>

对此：

<div style="float:left; position:relative; top:10px; border: 1px red dashed; width:800px; min-height:600px">test</div>

Answer 2

将left:155px缩减为left:10px，或者您可以完全删除此属性。

<强>更新

您只需要设置position:absolute

检查出来：http://jsfiddle.net/2dcPE/7/

Answer 3

试试这个

<div style="float:left; top:10px; border: 1px red dashed; width:800px; min-height:600px">
            test
        </div>

层叠样式表浮动

3 个答案: