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类，以将每个元素显示为块 - level元素，它使元素放在不同的行中：

.nextLine {
    display: block;
}

Answer 2

如果您希望仅在HTML中完成，则还可以在元素之间添加<br/>分页符。

<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}”。

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

3 个答案: