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

Question

我有一个使用 JQuery 移动设备的列表视图。

这是 mobile 上的样子。

我希望列表视图的每一里的高度自动增长以容纳信息，我还需要列表视图是可滚动的。

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

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

如果我更改溢出属性，则可滚动行为将消失。

我需要做什么？

下面是我的 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;
}

列表视图的 html 位：

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

P.S。通过克隆以下模板，li 元素以编程方式通过 jquery 附加：

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

li之后是appended

Answer 1

结论：

li个元素是display: inline-block;，这会导致它们并排溢出。您可以通过将 display 样式更改为 block.

让它们相互堆叠

其次，li 元素本身有一个 span，其中包含文本。这也会溢出，所以你需要给你的 li 样式 white-space: normal; 这样跨度就可以继承这个属性或直接将它添加到你的 span.

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

示例：

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

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

Trouble setting ul and li properly in html and css

javascript

html

css

jquery-mobile