如何使用Css使CellList流水平而不是垂直？ （GWT＆amp; CSS）

Question

我需要使用水平流动的CellList，如下所示：

This is traditional celllist (showing vertically)
Page
1
2
3
....

I want it to show horizontally like this:
Page 1 2 3 ......

我找到了一个解决方案，但有些人说这个解决方案不太好，因为它修改了Widget的html标签（通过将所有<div>替换为<span>）。

public class HorizontalCellList<T> extends CellList<T> {

  public HorizontalCellList(Cell<T> cell) {
    super(cell);
  }

  @Override
  protected void renderRowValues(
      SafeHtmlBuilder sb, List<T> values, int start, SelectionModel<? super T> selectionModel) {
    SafeHtmlBuilder filteredSB = new SafeHtmlBuilder();
    super.renderRowValues(filteredSB, values, start, selectionModel);
    SafeHtml safeHtml = filteredSB.toSafeHtml();
    String filtered = safeHtml.asString().replaceAll("<div", "<span").replaceAll("div>","span>");
    sb.append(SafeHtmlUtils.fromTrustedString(filtered));
  }
}

然后他们建议我用Css来达到同样的效果。我尝试过，但没有一个有效。

.horizontalCellList { display: inline; } --> it doesn't work
.horizontalCellList { display: inline; float:left; } --> it doesn't work either
myCellList.getElement().getStyle().setDisplay(Display.INLINE_BLOCK); --> doesn't work
myCellList.getElement().getElementsByTagName("li").getItem(i).getStyle().setDisplay(Display.INLINE);also doesn't work

对于那些不了解GWT但知道CSS / Html的人，那么这里是CellList的Html代码，我没有看到任何<span>，他们只有<div>。这里的诀窍是如何通过JUST使用CSS将所有<div>转向<span>。

<div class="GNOXVT5BEB" __gwtcellbasedwidgetimpldispatchingblur="true" __gwtcellbasedwidgetimpldispatchingfocus="true">
    <div></div>
    <div>
         <div aria-hidden="true" style="width: 100%; height: 100%; padding: 0px; margin: 0px; display: none;">
             <div aria-hidden="true" style="width: 100%; height: 100%; display: none;"></div>
         </div>
         <div aria-hidden="true" style="width: 100%; height: 100%; padding: 0px; margin: 0px; display: none;">
              <div aria-hidden="true" style="width: 100%; height: 100%; display: none;">
              </div>
         </div>
     </div>
</div>

任何人都可以提供一个好的解决方案吗？

Answer 1

根据托马斯的建议，这是一个完整的解决方案

1- myCellList.css

.cellListWidget {

}

.cellListEvenItem {
  display: inline-block;
  cursor: pointer;
  zoom: 1;
}

.cellListOddItem {
  display: inline-block;    
  cursor: pointer;
  zoom: 1;
}

.cellListKeyboardSelectedItem {
  background: #ffc;
}

 @sprite .cellListSelectedItem {
  gwt-image: 'cellListSelectedBackground';
  background-color: green;
  color: white;
  height: auto;
  overflow: visible;
}

2- MyCellListResources.java

import com.google.gwt.user.cellview.client.CellList;
import com.google.gwt.user.cellview.client.CellList.Style;

public interface MyCellListResources extends CellList.Resources{
     @Source({"myCellList.css"})
     @Override
     public Style cellListStyle();
}

3- YourMainPresenter.java

CellList<String> myHorizontalCellList = new CellList<String>(myTextCell, GWT.<MyCellListResources> create(MyCellListResources.class));

代码经过测试和测试符合你的要求。

Answer 2

这不是您想要的.horizontalCellList display: inline-block，而是每个项目的内部<div>元素。选择器必须是：

.horizontalCellList .gwt-CellList-cellListEvenItem, .horizontalCellList .gwt-CellList-cellListOddItem

假设您CellList.Style上有@Imported CssResource。

（免责声明：我只是在完全重新定义的自定义CellList.Style中尝试过，但没有理由不能使用@Import和后代选择器