绝对定位元素宽度问题

发布于 2024-12-06 23:18:18 字数 991 浏览 1 评论 0原文

我遵循 DOM 结构

<div>
    <span>/* comment action */</span>       //float:left
    <span>/* like action */</span>          //float:left
    <span>/* other actions                  //float:right; position:relative;
        <ul>                //position:absolute;
            <li>Set due date</li>
            <li>Delete</li>
        </ul>
    </span>
</div>

问题是，列表项的宽度设置为最长单词的宽度。我希望每个列表项出现在一行（如块）中，最大宽度应为最长的列表项，并将它们显示在其他项下面。

以下是一些屏幕截图，可以提供更好的想法。

https://i.sstatic.net/ooEVd.jpg（“Options”一词的最大宽度)

https://i.sstatic.net/7kqAY.jpg （单词“time”的最大宽度”)

<一href="https://i.sstatic.net/ScxFh.jpg" rel="nofollow">https://i.sstatic.net/ScxFh.jpg（删除后单词“Setduetime”的最大宽度空格）

我该如何解决这个问题？（我不想为 ul 指定具体宽度）

原文

I've following DOM structure

<div>
    <span>/* comment action */</span>       //float:left
    <span>/* like action */</span>          //float:left
    <span>/* other actions                  //float:right; position:relative;
        <ul>                //position:absolute;
            <li>Set due date</li>
            <li>Delete</li>
        </ul>
    </span>
</div>

The problem is, the width of list item is set to width of longest word. I want each list item to appear in one line (like block) and maximum width should as of longest list item, and show them one below other.

Here are some screen shots that will give much better idea.

https://i.sstatic.net/ooEVd.jpg (max width of word "Options")

https://i.sstatic.net/7kqAY.jpg (max width of word "time")

https://i.sstatic.net/ScxFh.jpg (max width of word "Setduetime" when removed spaces)

How can I fix this? (I don't want to specify specific width to ul)

分享到QQ

分享到微博