显示浮动 UL，列表左侧与上方的直接文本字段对齐答案

【问题标题】：Display floating UL with the left of the list lined up with the immediate text field above显示浮动 UL，列表左侧与上方的直接文本字段对齐
【发布时间】：2014-05-28 12:45:20
【问题描述】：

我需要 CSS 方面的帮助来显示一个值列表，可能是在与它上面的直接文本字段对齐的无序列表中。

这段代码由 HTML、javascript/jquery 和 JSON 数据组成。

<table>
    <tr>
        <td>
            <input type="text" size="30" onKeyUp="javascript:displayList();" />
            <td>
    </tr>
    <tr>
        <td>
            <input type="text" size="30" onKeyUp="javascript:displayList();" />
            <td>
    </tr>
    <tr>
        <td>
            <input type="text" size="30" onKeyUp="javascript:displayList();" />
            <td>
    </tr>
</table>
<div>
    <ul id="localityList"></ul>
</div>




var dataObj = {
    "response": {
        "status": {
            "severity": "NORMAL",
            "text": ""
        },
        "target_value": ""
    },
    "locality": [{
        "locId": "31110",
        "name": "Mont Albert",
        "alias": "ALERT",
        "event": "A",
        "state": "on"
    }, {
        "locId": "31111",
        "name": "Mt Macedone",
        "alias": "MACEDON",
        "event": "A",
        "state": "off"
    }, {
        "locId": "31112",
        "name": "Mornington Pen.",
        "alias": "MORNINGTON",
        "event": "B",
        "state": "on"
    }, {
        "locId": "31113",
        "name": "Mt Pleasant",
        "alias": "PLEASANT",
        "event": "C",
        "state": "on"
    }, {
        "locId": "31114",
        "name": "Kanga I",
        "alias": "KANGAROO",
        "event": "I",
        "state": "on"
    }, ]
};


function distribute(pThis) {
    //console.log($(pThis).find('td.liLocId').text());
}

function displayList() {
    locality = dataObj.locality;
    $("#localityList").empty('li');
    var li = "";
    $.each(locality, function (i, o) {
        li += '<li class="clsLocList" onClick="javascript:distribute(this);"><table><tr><td class="liLocId">' + locality[i].locId + '</td><td class="liLocName">' + locality[i].name + ' (' + locality[i].alias + ')</td></tr></table></li>';
    });

    $("#localityList").append(li);
}

这是我的 jsfiddle： http://jsfiddle.net/3ukhN/

感谢任何建议

【问题讨论】：

标签： jquery html css json

【解决方案1】：

您必须覆盖浏览器特定的样式... 只需申请

*{
margin:0;
padding:0;
}

JSFiddle

旁注：

您可能想要关闭标签
您可以简单地使用一些 <span>s 来创建相同的布局，而不是在 <li> 中添加整个表格，但表格渲染会更慢 afaik。

【讨论】：

TJ，感谢您的帮助。我没有解释清楚。我需要一个浮动的 div 之类的东西，这样文本框在显示时的位置并不重要，它与左对齐，与上面的直接文本框对齐。我正在尝试实现类似于 Google 搜索自动完成的结果。

【解决方案2】：

为了让浮动 UL（包装在 DIV 中），确定文本字段的位置，然后将该位置用作推导 DIV 相对于文本字段显示的新位置的基础。在这种情况下，它向左对齐。

要计算出元素的位置，请使用。这是一个技巧：

var item = $(pItem);
console.log("displayDiv.pItem.id:" + pItem.id);
var pos = item.offset();
pos.bottom = pos.top + item.height();
pos.right = pos.left + item.width();

var top = pos.bottom + 10;
var left = pos.left;

$("#ulDiv").css({
    position: 'absolute',
    zIndex: 2000,
    left: left,
    top: top
});
$('#ulDiv').show();

更新的 jsfiddle： http://jsfiddle.net/3ukhN/

干杯

【讨论】：