Question

我有一个盒子，我试图在右下角添加一个按钮，但是当我尝试将它向右浮动时，它最终会在我放入它的div之外。我该如何解决这个问题？

代码：

    <!doctype html>
<html>
    <head>
        <style>
        #sidebar {
            width: 340px;
            float:left;
        }

        .side_block {
            background-color: #FFFFFF;
            padding:8px;
            margin: 8px;
            border-radius: 12px;
            border: 1px solid #AAAAAA;
        }
        .addLink{
            float:right;
            font-size:12px;
        }   
        </style>
    </head>
    <body>
        <div id="sidebar">
            <div class="side_block">

                        <h4>Files</h4>
                        <ul>
                            <li><a href="#">Original Emails.doc</a></li>
                            <li><a href="#">Homepage Draft.jpg</a></li>
                            <li><a href="#">First_Draft.txt</a></li>
                        </ul>
                        <input type="button" class="addLink" value="+Add File" style="float:right;">
            </div>
        </div>
    </body>
</html>

Answer 1

将overflow:hidden; zoom:1;添加到.side_block至clear your float。

Answer 2

清除你的浮动：

<div class="side_block">

            <h4>Files</h4>
            <ul>
                <li><a href="#">Original Emails.doc</a></li>
                <li><a href="#">Homepage Draft.jpg</a></li>
                <li><a href="#">First_Draft.txt</a></li>
            </ul>
            <input type="button" class="addLink" value="+Add File" style="float:right;">
            <br style="clear: right;" />
</div>

Answer 3

试试这个......

<body>
  <div id="sidebar">
    <div class="side_block">
      <input type="button" class="addLink" value="+Add File" style="float:right;">
      <h4>Files</h4>
      <ul>
        <li><a href="#">Original Emails.doc</a></li>
        <li><a href="#">Homepage Draft.jpg</a></li>
        <li><a href="#">First_Draft.txt</a></li>
      </ul>
    </div>
  </div>
</body>

CSS和浮点数问题

3 个答案: