Question

我尝试将span元素和使用块内格式的列表组合在一起。似乎有这么多的元素错位。

此外，是否有人知道如何将元素包装在固定宽度内？

她的链接

<http://jsfiddle.net/joewaldronrit/3nhdnbL8/#&togetherjs=97QmIzvPKD>?

CSS：

.word-sugg-hint{
    position:absolute;
    top: 50px;
    text-align: left;
    font-size: 12px;
    padding-right: 0px;
    color:rgb(32,106,138);
}

.sugg-details{
    display:inline-block;
    text-align:left;
}

ul.suggestion-list li{
    display: inline-block;
    font-size: 14px;
    height:0px;
}

ul.suggestion-list{
    display: inline-block;
    font-size: 12px;
    margin-left: 0px;
    padding-bottom:3px;
}

ul.suggestion-list li:hover{
    color:rgb(105, 131, 73);
    cursor:pointer;
    text-decoration: underline;

}

ul.suggs.suggestion-list li{
/*
    width:180px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    */
    float: left;
    height: 20px;
    color:#0000FF;
    font-size:14px;
    display:inline-block;
    padding:0px;
}

使用Javascript：

var crateItems = ["apples", "bananas", "grapefruit"];
var suggList = document.getElementById("suggestion-list");
for (var i = 0; i < suggList.children.length; i++) {
    if (crateItems.length === i) break;
    suggList.children[i].innerHTML =  crateItems[i]  + (i < crateItems.length - 1 ? "," : "");
}

HTML

<div class="word-sugg-hint" id ="sugg-div">
                                <h class="sugg-details"> Did you mean? </h>
                                <ul id="suggestion-list" class="suggestion-list suggs">

                                    <li>

                                    </li>
                                    <li>

                                    </li>
                                    <li>

                                    </li>
                                    <li>

                                    </li>
                                    <li>

                                    </li>
                                    <li>

                                    </li>
                                    <li>

                                    </li>
                                    <li>

                                    </li>
                                    <li>

                                    </li>
                                    <li>

                                    </li>
                                </ul>
 </div>

Answer 1

此答案假定<h>代替<span>元素，而不是float:left元素。

您的元素未对齐的主要原因是您的display: inline-block与您的{{1}}发生冲突。这解决了你的第一个问题。第二个问题，如何在固定宽度内包装元素。如果你看到我的jsFiddle，我只是用一个名为'wrap'的类包装了span和ul。我给了那个元素一个固定的宽度。我还给它一个背景颜色，这样你就可以很容易地看到每个div的宽度。因为div是块元素，所以我必须将它显示为内联块。您将看到文本对齐，宽度相同。拿走背景颜色，我认为它呈现你想要的方式：http://jsfiddle.net/3nhdnbL8/2/

作为一个更大的收获，我可以建议，当使用CSS来获得理想的外观时，我们经常会不断添加内容。重要的是要记住，当您添加某些内容时，可能会与已存在的内容发生冲突。每次你想要添加一些东西，我首先会问你是否应该拿出任何东西。以我们规划JavaScript的方式规划我们的CSS是个好主意。过多的CSS会导致大量冲突，并且可能变得非常难以调试。

祝你好运。

Span和list元素在DIV中换行

1 个答案: