Css 使此列表正确展开

我有一个列表，其中包含单击链接时打开的详细信息部分。它在大多数情况下都可以正常工作，但在某些边缘情况下却不行

我在代码中加入了注释，以准确解释问题所在

理想情况下，我想用CSS解决这个问题，但我已经在页面上使用javascript和jQuery，所以如果无法实现，使用它们的解决方案是可以的

或者，以下是html：

示例1这就是它的外观

<ul>
    <li class='open'>
        <div class='title'>
            <a class='link'>details</a>
            item 1
        </div>
        <div class='details'>
            These details open when the details link is clicked
        </div>
    </li>
    <li>
        <div class='title'>
            <a class='link'>details</a>
            item 2
        </div>            
        <div class='details'>
            this is hidden
        </div>        
    </li>
    <li>
        <div class='title'>
            <a class='link'>details</a>
            item 3            
        </div>            
        <div class='details'>
            this is hidden
        </div>        
    </li>    
</ul>

---

只需移除

ul{width:15em}

部分即可工作：

您可以为

li设置
display:inline block
。打开
元素。当然，只有在您希望每个列表项都适合其内容的情况下

虽然我不太清楚你的问题是什么意思。
@Evan，5秒钟后。。。如果可能的话，我会与你分享：）对不起，忘了补充一点，ul故意限制在一个宽度上，以便在边缘情况不满足时阅读效果更好。这满足了所有要点，但其他项目上的详细链接与打开的详细链接不匹配。不过，它确实提供了一个简单的JavaScript解决方案——我可以临时应用内联块，然后扫描最宽的块。
<ul>
    <li class='open'>
        <div class='title'>
            <a class='link'>details</a>
            item 1 with a very very  very long name
        </div>
        <div class='details'>
            These details open when the details link is clicked
        </div>
    </li>
    <li>
        <div class='title'>
            <a class='link'>details</a>
            item 2
        </div>            
        <div class='details'>
            this is hidden
        </div>        
    </li>
</ul>

<ul>
    <li class='open'>
        <div class='title'>
            <a class='link'>details</a>
            item 1
        </div>
        <div class='details'>
            <div class='url'>
                 all this should be on one line: www.a-long-url
            </div>

        </div>
    </li>
    <li>
        <div class='title'>
            <a class='link'>details</a>
            item 2
        </div>            
        <div class='details'>
            this is hidden
        </div>        
    </li>
</ul>

.details {
    display: none;
}

.open .details {
    display: block;
}

.link {
    text-decoration: underline;
    float: right;
}

.title {
    font-weight: bold;
    white-space:nowrap;
}

.url {
    white-space:nowrap;
}

ul {
    list-style-type: none;
    width: 15em;
}
li.open {
    background-color: #c8d8ff;
    border-radius: 2em;
}

li>div {
    padding: 1em;     
}