HTML 5/CSS (??) 如何使 div 元素位于下一行？

Question

我有以下代码。目标是让

位于下一行，但我做不到。这个 div 在同一行 的左侧。但是，我希望这个 div 位于下一行。我认为默认情况下 div 是 block 元素，这会导致它位于下一行。我尝试将 css 更改为“.sign-on”甚至“.sign-on-menu”类的 display:block 和 display:inline-block，但它没有用。任何帮助都会很棒。谢谢。

ps:如何将屏幕截图放到 stackoverflow 上？

1) 内部 JSP 代码

<nav>
    <div id="nav-center" class="nav-center">
        <a class="sign-on" href="/owner.jsp">Sign-on</a>
        <div class="sign-on-menu">
            <ul>
                <li><a href="/owner.jsp">Owner</a></li>
                <li><a href="/owner.jsp">Professional</a></li>
            </ul>
        </div>
    </div>  
</nav>

2)内部CSS代码

nav {
width: 100%;
height: 32px;
background-color: #227BC8;  
}

.nav-center {
margin-left: auto;
margin-right: auto;
width: 85%;
}

.sign-on {
float: right;
padding: 9px;
background-color: #000000;
text-decoration: none;
color: #FFFFFF;
display: block;
}

.sign-on:hover {
background-color: #bfbfbf;
color: #000000;
}

.sign-on-menu {
float: right;
margin: 0px;
padding: 9px;
background-color: #bfbfbf;
}

.sign-on-menu ul {
margin-top: 2px;
margin-bottom: 2px;
padding: 0px;
list-style-type: none
}

.sign-on-menu a {
text-decoration: none;
color: #000000;
}

最佳答案

尝试将 clear:right; 添加到您的 .sign-on-menu 类中:

.sign-on-menu {
  float: right;
  clear: right;
  margin: 0px;
  padding: 9px;
  background-color: #bfbfbf;
}

工作 fiddle :https://jsfiddle.net/hpm285qo/2/

关于HTML 5/CSS (??) 如何使 div 元素位于下一行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31146719/

Answer 1

尝试将 clear:right; 添加到您的 .sign-on-menu 类中:

.sign-on-menu {
  float: right;
  clear: right;
  margin: 0px;
  padding: 9px;
  background-color: #bfbfbf;
}

工作 fiddle :https://jsfiddle.net/hpm285qo/2/