Question

我有一个标题和部分，标题中的元素重叠。具体来说，标题内的两个div是重叠的（一个向左浮动，另一个向右浮动）

HTML：

        <div id="main-contianer">
        <header id="main">
            <div id="logo">
                <h1>Ladder</h1>
            </div>

            <div id="sign-in">
                <form id="log-in" action="login.jsp"><!--not complete-->
                    <div id="username">
                        <label>Username</label>
                        <input type="text" name="username">
                    </div>
                    <div id="password">
                        <label>Password</label>
                        <input type="password" name="password">
                    </div>
                    <div id="log-in">
                        <input type="submit" value="Log In">
                    </div>
                </form>
            </div>
        </header>
        <section>
            <!--code here not included-->
        </section>

CSS：

header#main div#logo{
    float: left;
}

header#main div#sign-in{
    float: right;
}

这是JSFiddle，看看它是什么样的：http://jsfiddle.net/FLwUA/106/

如何确保标题和部分不重叠？

Answer 1

尝试使用display: inline-block;代替浮动。

然后给import java.util.Scanner; public class Letgoshop { public static void main(String[] args) { Scanner input = new Scanner(System.in); System.out.println("Enter item: "); String name = input.nextline(); System.out.println("Enter Price: "); double price = input.nextdouble(); System.out.println("Enter Quantity: "); int m = input.nextint(); System.out.print("You owe $" + m*price + " for " + m + " " + name.toUpperCase() +"(S)"); } }

Answer 2

在CSS中添加一个新类：

<强> CSS

.clearfix {
  clear: both;
}

在</header>之后但<section>之前在HTML中添加以下内容

<强> HTML

<div class="clearfix"></div>

参考here。

重叠标题/部分

2 个答案: