Javascript 无法在html和css中正确设置ul和li

我有一个使用JQuery Mobile的列表视图

这就是它在电视上的样子

我希望listview的每个li的高度自动增长以容纳信息，并且我还需要listview可以滚动

我发现如果我给listview一个固定的高度，它就可以在两个方向上滚动。但我希望它只能垂直滚动，不能水平滚动

我尝试在css中增加listview中每个li的高度，但是文本仍然只能水平显示，并且不会包含在li的高度和宽度内

如果更改overflow属性，则可滚动行为将消失

我需要做什么

下面是我的listview css：

.listview-container
{
  margin-left: 25px;
  margin-right: 25px;
  max-height: 300px;
  overflow: scroll;
  width: 100%;
}

.logsView-scroll
{

  -webkit-overflow-scrolling: touch;
}

.listview-li
{
  display: inline-block !important;
}

<div class="listview-container">
    <ul id="chickenLog" data-role="listview" class="logsView-scroll">
    </ul>
</div>

listview的html位：

.listview-container
{
  margin-left: 25px;
  margin-right: 25px;
  max-height: 300px;
  overflow: scroll;
  width: 100%;
}

.logsView-scroll
{

  -webkit-overflow-scrolling: touch;
}

.listview-li
{
  display: inline-block !important;
}

<div class="listview-container">
    <ul id="chickenLog" data-role="listview" class="logsView-scroll">
    </ul>
</div>

另外，通过克隆以下模板，通过jquery以编程方式追加li元素：

<ul id="chickenLog" data-role="listview" class="logsView-scroll">
    <li class="listview-li" id="aLog" data-theme="a"><span id="text"></span> 
    </li>
</ul>

---

李后是

结论：

.listview-li {
    display: block;
    white-space: normal !important;
}

li

元素是

display:inline块，这将导致它们相邻并溢出。通过将
显示
样式更改为
块
，可以使它们堆叠在一起

其次，
li
元素本身有一个
span
，里面有文本。这也会溢出，因此您需要为
li
提供样式
空白：normal
以便span可以继承此属性或直接将其添加到您的
span

（注意：在使用库时，它们通常可以包含自己的
CSS
。因此，如果您在元素上放置了一些样式，但它们似乎没有显示出来，这可能是因为库正在覆盖它。要解决这一问题，您可以将
！important
放在样式的末尾。）

示例：

.listview-li {
    display: block;
    white-space: normal !important;
}

在添加
li
s后，您可以共享HTML吗？@HaldenCollier张贴在问题的底部。您可以添加样式“overflow-x:hidden”或使用“word wrap”作为contentsTry放置
空白：normal！重要信息
在您的
li
风格中无需担心，乐于帮助！另外，如果您使用JQuery Mobile，我注意到如果您的css没有显示，则很可能您没有在js中初始化页面。例如，$（document）.delegate（“#page_id”，“pageinit”，function（）{}）；我测试了这行代码和没有这行代码，我的css只有在我使用了这段代码之后才会显示出来。