Javascript Span和list元素包装在DIV中

我尝试将一个span元素和一个在块格式中使用的列表组合起来。这些元素似乎有如此大的错位

还有，有人知道如何在固定宽度内包装元素吗

她是一个链接

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

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 ? "," : "");
}

var-items=[“苹果”、“香蕉”、“葡萄柚”]；
var suggList=document.getElementById（“建议列表”）；
for（var i=0；i

HTML

你是说？

这个答案假设不是

元素，而是

元素未对齐的主要原因是

float:left

与

display:inline块发生冲突。这解决了你的第一个问题。第二个问题，如何在固定宽度内包装元素。如果您看到我的JSFIDLE，我只是用一个名为“wrap”的类的div来包装span和ul。我给了那个元素一个固定的宽度。我也给了它一个背景色，这样你可以很容易地看到每个div的宽度。因为div是块元素，所以我必须让它显示为内联块。您将看到文本对齐，宽度相同。去掉背景色，我想它会呈现出你想要的效果：

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

祝你好运。
将问题中的代码张贴出来。。。不要试图绕过jsfiddle限制。好的，但这是一个格式错误。很快就要发布了，对不起。什么元素是
？您还需要从列表中删除填充和边距，如果您希望它与其他浮动元素对齐，则将其浮动。看起来有人对您的div进行了一些修改。我检查了我的提琴，提琴正在堆叠，因为根据你的问题，我给了它们一个固定的宽度，而我的窗户不够宽，不能同时容纳两个。我把它改成了a%。我不知道你希望结果是什么样子，但是如果你认为我回答了你的问题，你能接受吗？如果我没有回答，请告诉我遗漏了什么。谢谢
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 ? "," : "");
}

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