html - 如何更改编辑 Controller 显示的跨度长度

Question

我的带有 Controller 的 div 溢出 span，文本在 td 中。 我可以在他们的节目中从 Controller div 中设置力跨度吗？

这是我需要的:

这是我所拥有的:

这是我的代码:

.controllers {
    position: absolute;
    right: 0px;
    top: -4px;
    display: none;
    transition: visibility 0.5s, opacity 0.5s linear;
    opacity: 1;
}

<tr onmouseover="document.getElementById('row2').style.display='block';" 
    onmouseout="document.getElementById('row2').style.display='none';">
    <td class="mdl-data-table__cell--non-numeric">2048</td>
    <td class="mdl-data-table__cell--non-numeric">Lorem text</td>
    <td class="mdl-data-table__cell--non-numeric">
        <div style="position: relative; vertical-align: top;">
            <span>Very long content Very long content Very long content Very long content Very long content Very long content</span>

            <div class="controllers" id="row2">
                <div class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="edit2">
                    <i class="material-icons">edit</i>
                </div>
                <span class="mdl-tooltip" for="edit1">Edit</span>
                <div class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="delete2">
                    <i class="material-icons">delete</i>
                </div>
                <span class="mdl-tooltip" for="delete2">Delete</span>
            </div>
        </div>
    </td>
</tr>

Answer 1

任何 display:inline; 元素(例如未重新定义的 span)都没有定义的宽度。

你可以使用花车吗？ float:right;在输出内容之前设置按钮可能会成功:

http://dabblet.com/gist/7d8b25a7c18e956c77b1

div{
    background: #f06;
    background: linear-gradient(45deg, #f06, yellow);
    min-height: 100%;
}

.fr { float:right; }

<span class="fr"><button>Del</button><button>Edit</button></span>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id ornare mi. Duis id dapibus est. Integer egestas eleifend ipsum sed facilisis. Suspendisse rhoncus, quam quis ultricies rutrum, ipsum erat lobortis enim, vel ultrices purus diam non ligula. Donec ullamcorper orci malesuada, ornare orci mollis, vehicula tortor. Phasellus vitae pulvinar lacus. In eu odio nec est mollis ultrices eget rhoncus erat. Morbi pellentesque quam viverra egestas ullamcorper. Praesent tristique felis vel nibh pharetra varius. Ut ut luctus orci, vitae rhoncus velit. Fusce luctus, ligula eu fringilla venenatis, ipsum tellus elementum nisl, lobortis iaculis sapien quam cursus neque. Maecenas maximus finibus justo at blandit. Nam blandit scelerisque metus non facilisis. Vestibulum dictum eu eros vel accumsan. Duis massa leo, aliquam non ullamcorper eu, rhoncus et lacus.Proin pretium semper purus sit amet mollis. Sed non nibh vel diam tempor dapibus. Mauris dapibus augue augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam quis nulla massa. Donec sodales nisi urna, ac pharetra nibh gravida in. Vestibulum blandit sit amet massa ac vehicula. Duis nibh odio, ultricies quis leo eu, semper vestibulum mauris. Suspendisse egestas euismod augue non fermentum.Donec congue massa quis purus posuere, eu egestas nunc ullamcorper. Vestibulum pellentesque urna pulvinar, vestibulum augue quis, dictum mi. Donec sit amet tortor vel leo vulputate sollicitudin vitae nec mi. Curabitur euismod sed sapien in pellentesque. Curabitur eros tortor, porta non magna gravida, euismod ultricies velit. Aliquam varius magna diam. Sed feugiat sapien sit amet cursus semper. Praesent tincidunt, libero eget tristique finibus, ipsum purus pellentesque magna, et porttitor enim nisl quis arcu. Suspendisse lacinia eleifend pulvinar. Sed placerat euismod porta.Pellentesque rhoncus, enim sed commodo viverra, libero arcu dignissim nisl, sit amet rutrum erat libero quis nisi. Maecenas ornare hendrerit sagittis. Mauris posuere lorem ante, non aliquet turpis bibendum id. Praesent suscipit, justo eget porta mollis, leo dui blandit ex, et rutrum eros turpis ut sapien. Suspendisse dapibus sit amet sapien ac hendrerit. Suspendisse nec urna auctor, interdum ex quis, dictum lectus. Vestibulum sit amet mauris a dolor laoreet congue. Sed mollis, metus eu fringilla finibus, dolor ipsum posuere lacus, eget aliquam enim nisl id risus. Quisque vitae eros porta, molestie nibh ac, dictum purus. Curabitur blandit justo id hendrerit tempor.Mauris ut fermentum ante. Ut finibus efficitur massa vitae auctor. Nullam laoreet tristique felis et mattis. Praesent ultrices, libero eu sagittis facilisis, ipsum diam auctor mauris, non hendrerit justo massa ut augue. Vivamus varius ipsum id lorem cursus aliquet. Aliquam erat volutpat. Pellentesque fermentum mi vitae finibus placerat. Nunc blandit leo aliquam ullamcorper euismod. Donec varius et tortor sit amet euismod. Phasellus non ipsum in diam tristique fermentum id vitae tortor. 
</div>

注意:也可以使用 span 包装内容，我只是习惯使用 div。