范围和列表元素在 DIV 中换行

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发生冲突。这解决了你的第一个问题。您的第二个问题，如何在固定宽度内包装元素。如果你看到我的jsFiddle，我只是用一个div包装了span和ul，div有一个名为"wrap"的类。我给该元素一个固定的宽度。我还给了它一个背景颜色，所以你可以很容易地看到每个div的宽度。因为div是块元素，所以我必须让它显示为内联块。您将看到文本对齐，宽度相同。去掉背景颜色，我认为它呈现的方式是你想要的：http://jsfiddle.net/3nhdnbL8/2/

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

祝你好运。