Question

我试图将两个UnorderedList（内容是动态生成的）彼此相对（一个在屏幕的左侧，一个在右侧）但是在同一行但是第二个列表总是被一个垂直边距并浮动在第一个列表下方（屏幕的另一端但在第一个列表的下方）

  <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提供解决方案） 删除了清除：两者并且问题已解决

Answer 1

这应该可以满足您的需求，从ul中移除clear:both并将clear:both;放到以下元素中：

＆＃13;

<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>

＆＃13;

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

Answer 2

clear:both将有助于在花车后清除。因此，如果您遇到此问题，请同时使用clear:both。

试试这个：

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

两个无序列表并排相对

2 个答案: