html - 如何将项目放在不同行中的div中

Question

我有这个小 div，里面有两个项目

<div>
<g:Anchor styleName="anchorStyle nextLine">Administration</g:Anchor>
<g:ListBox styleName="nextLine">
</g:ListBox>
</div>

这两个项目现在出现在一行中。我想在不同的行中显示这两个项目，即 Anchor 和 listBox，它们在 1 个 div 中

谢谢

Answer 1

我不知道具体是什么g:Anchor，g:ListBox但您可以简单地将display: block;CSS 声明添加到.nextLine类中，以将每个元素显示为块级元素，从而将元素放置在单独的行中：

.nextLine {
    display: block;
}

Answer 2

<br/>如果您只想在 HTML 中完成，也可以在元素之间添加分页符。

<div>
   <g:Anchor styleName="anchorStyle nextLine">Administration</g:Anchor>
   <br/>
   <g:ListBox styleName="nextLine">Something else</g:ListBox>
</div>

http://jsfiddle.net/GtyC2/

Answer 3

我猜你正在使用 UIBinder。如果是这样，这段代码对我有用：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style> 
    .nextLine {
        display: block; 
    }
    </ui:style>
    <g:HTMLPanel>
        <div> 
            <g:Anchor styleName="anchorStyle {style.nextLine}">Administration</g:Anchor>
            <g:ListBox styleName="{style.nextLine}"></g:ListBox>
        </div>
    </g:HTMLPanel>
</ui:UiBinder> 

注意样式的声明，它包含在同一个 xml 文件中：styleName="{style.nextLine}"。