float right 属性上一个容器溢出时显示错误

Question

我正在显示容器中的文件列表。此列表由 php 脚本生成。

对于每个文件，我都关联了一个垃圾桶按钮，以便在用户需要时删除文件。为此，我在垃圾桶按钮上将浮动设置为右侧。

但在某些文件名太长的情况下，由于溢出，按钮不会显示在同一行上....知道如何解决这个问题吗？

这是生成脚本：

$list_docs = '<ul class="listDocs">';
foreach ($iterator as $file) {

    // ignore filenames starting with . dot.
    if (substr($file->getBasename(), 0, 1) === '.') {
        continue;
    }

    $entryId++; // unique list entry id...

    // use this and $prevDepth to check for nesting into and out of directories...
    $curDepth = $iterator->getDepth();

    $dirStart = $curDepth > $prevDepth; // nest down a directory?

    $dirEnd   = $curDepth < $prevDepth; // end of the directory
    if ($dirEnd) { // UL end...
        $list_docs .= '<!-- dir-end --></ul>';
    }

    if ($file->isDir()) { // display path details...
        if ($dirStart) { //  UL start... with Directory so will nest...
            $list_docs .= '<ul class="listDocs indent">';
        }

        // display directory details
        $list_docs .= '<li class="docResult"><i class="fa fa-folder"></i>&nbsp;<span id="file_'. $entryId. ' data-folder="'.$file->getPathname().'" class="folderClic">'.$file->getFilename().'</span><span class="file-remove fa fa-trash-o"></span></li>';

     } else {

        if ($dirStart) { // UL start... first time for this directory...
            $list_docs .= '<ul class="listDocs indent">';
        }

        // display file details
        $list_docs .= '<li class="docResult"><i class="fa fa-file-o"></i>&nbsp;<span id="file_'. $entryId .'" data-file="'.$file->getPathname().'" class="fileClic">'.$file->getFilename().'</span><span class="file-remove fa fa-trash-o"></span></li>';
    }
    $prevDepth = $curDepth; // record depth so we can check next time...
}
$list_docs .= '</ul>';

此代码粘贴到 div :

<div class="documentList" id="documentList">Explorer</div>

这里是 css :

.file-remove {
  float: right;
  color: #700;
  cursor: pointer;
}

.documentList{
  display: inline-block;
  background-color: rgba(255,255,255,1);
  border-style: solid;
  border-width: 2px;
  border-color: rgba(0,0,0,0.3);
  color: rgba(116,119,123,1);
  padding: 0.5em 0.5em;
  width: 20%;
  min-height: 500px;
  vertical-align: top;
}


.listDocs{
  list-style: none;
  text-align: left;
  padding: 0em 0em;
  margin: 0em 0em;
  overflow: auto;
}

我也曾尝试将其显示为 table，但我无法获得文件名列的正确宽度。

编辑：这是问题的图片：

我也试过 word-wrap: break-word;在 docResult class 上，我得到以下信息：

Answer 1

我可能会更改内联元素：

<li class="docResult">
    <i class="fa fa-file-o"></i>
    <span id="file_'. $entryId .'" data-file="'.$file->getPathname().'" class="fileClic">'.$file->getFilename().'</span>
    <span class="file-remove fa fa-trash-o"></span>
</li>

进入：

<li class="docResult">
    <div class="file"><i class="fa fa-file-o"></i></div>
    <div class="title" id="file_'. $entryId .'" data-file="'.$file->getPathname().'" class="fileClic">'.$file->getFilename().'</div>
    <div class="file-remove"><i class="fa fa-trash-o"></i></div>
</li>

这样我们可以将它们显示为 "inline-block"，并且长文件标题可以垂直增长而不会中断任何一侧的图标。

那么，我们可以：

.docResult{
    font-size: 0; /* Remove children spacing */
}

.docResult div{
    display: inline-block; /* Allows for horizontal positioning of siblings */
    vertical-align: top; /* They will stick to the top, even if a long title expands the row */
    font-size: inital; /* Resets font-size from parent's 0px */
}

.docResult .file{
    width: 50px; /* Example icon width */
}

.docResult .file-removed{
    width: 50px;
}

.docResult .title{
    width: calc(100% - 50px - 50px); /* We want the title to be as long as it can be without overlapping icons */
}

所以，基本上我们使用 block 元素而不是 inline 元素，这样元素就不会像文本。之后，我们定义我们希望每个元素水平放置，使两个图标与标题的第一行对齐，并在不妨碍任何一个图标的情况下为标题的元素提供最大可能。

float right 属性上一个容器溢出时显示错误

float right property wrong display when overflow in previous container

html

css

php

overflow

css-float

float right 属性 上一个容器溢出时显示错误

float right property wrong display when overflow in previous container

html

css

php

overflow

css-float

float right 属性上一个容器溢出时显示错误