javascript - 两个并排彼此相对的无序列表

Question

我试图将两个 UnorderedList(内容是动态生成的)彼此相对(一个在屏幕左侧，一个在屏幕右侧)，但在同一行，但第二个列表始终偏移垂直边距并 float 在第一个列表下方(屏幕末端的对面，但在第一个列表下方)

  <div data-role="content" id="home"> 
        <h4 style="float: left; width: 50%;">Below Employees have just checked in the Premises</h4>
        <h4 style="float: right; width: 50%; text-align: right;">Employee below has just now taken off his/her safety helmet</h4> 
        <ul style="width:200px;float:left;clear:both;display: inline-block;padding:5px" data-role="listview" id="listView1" data-inset="true"></ul> 
        <ul style="width:200px;float:right;clear:both;display: inline-block;padding:5px" data-role="listview" id="listView2" data-inset="true"></ul>
  </div> 

我尝试了所有 CSS 样式，但我根本无法让第二个列表与第一个列表并排放置(但位于屏幕的另一端)

LIST 的内容是通过这种方式动态生成的(尽管我觉得这对于上述问题并不重要)。

var $li = $("<li>").attr("data-filtertext",msg.userID).appendTo("#listView1");
        $("<a>").attr("href","#")
                .attr("id",msg.userID)
                .text(msg.userID)
                .appendTo($li)
                .css("background", "#F68D78");
        $("#listView1").listview('refresh')

有效的解决方案(感谢 David 提供的解决方案)删除了 clear:both 并解决了问题

Answer 1

这应该可以满足您的要求，从 ul 中删除 clear:both 并将 clear:both; 放入以下元素:

<div data-role="content" id="home"> 
  <h4 style="float: left; width: 50%;">Below Employees have just checked in the Premises</h4>
  <h4 style="float: right; width: 50%; text-align: right;">Employee below has just now taken off his/her safety helmet</h4> 
  <br style="clear:both;">
  <ul style="width:200px;float:left;display: inline-block;padding:5px" data-role="listview" id="listView1" data-inset="true">List 1</ul> 
  <ul style="width:200px;float:right;display: inline-block;padding:5px" data-role="listview" id="listView2" data-inset="true">List 2</ul>
  <br style="clear:both;">
</div> 

附:请将您的样式保留在 HTML 之外并使用 CSS 文件。保持代码更清晰