html - 如何限制悬停宽度过渡，使对象不超出父标签？

Question

所以，问题列在标题中。我有一个红色对象，它会在悬停时更改其宽度。但是当它这样做时，您会看到它超出了中央 div，即待办事项应用程序的整个矩形。我正在尝试解决这个问题。正在发生的事情的视频:https://youtu.be/ELkusRU7Wr4

代码:deleteTask - 包含垃圾桶图标的红色区域listItems - 列表项本身分开(每个'li')

HTML:

<div id="workingField">
    <h1 id="toDoListHeader">TO-DO LIST<i class="fa fa-pencil" aria-hidden="true" id="hideInputField"></i></h1>
    <input type="text" id="addNewTask" placeholder="Add New Task">
    <ul id="tasks">
        <li id="listItem">Task1<span id="deleteTask"><i class="fa fa-trash" aria-hidden="true"></i></span></li>
        <li id="listItem">Task2<span id="deleteTask"><i class="fa fa-trash" aria-hidden="true"></i></span></li>
        <li id="listItem">Task3<span id="deleteTask"><i class="fa fa-trash" aria-hidden="true"></i></span></li>
    </ul>
</div>

CSS:

#deleteTask
{
    background-color: #f26363;
    box-sizing: initial;
    clear: left;
    color: white;
    cursor: pointer;
    float: right;
    display: inline-block;
    height: 100%;
    margin: -3px -15px 0px -3px;
    opacity: 0;
    padding: 3px 0px 0px 2px;
    text-align: left;
    vertical-align: 0px;
    width: 0px;
}

#listItem
{
    background-color: white;
    color: #595959;
    height: 30px;
    line-height: 25px;
    padding: 3px 15px 0px 15px;
    vertical-align: 5px;
}

#listItem:hover #deleteTask
{
    opacity: 1;
    text-align: center;
    -webkit-transition: 2s linear;
    -moz-transition: 2s linear;
    -o-transition: 2s linear;
    transition: 2s linear;
    width: 35px;
}

Answer 1

你需要的是放

#listItem{
    overflow: hidden;
}

在包含列表的主要元素的包装上。

我同意上面的答案，即使用翻译的性能要好得多。

此外，在应用程序中过度使用 id 是不好的做法，因此我建议使用类而不是 id 来设置元素样式。检查:CSS: #id .class VS .class performance. Which is better?