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

debugcn 发表于 Dev

文森特·泰西尔（Vincent Teyssier）

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

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

但是在某些情况下，由于溢出文件名太长，按钮不会显示在同一行上。

这是生成脚本：

$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;
}

我也尝试过将其显示为表格，但是我无法为文件名列获取正确的宽度。

编辑：这是问题的图片：

我还尝试了自动换行：断行；在docResult类上，然后得到以下内容：

白蛋白

我可能会更改内联元素：

<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>

这样，我们可以将它们显示为“内联块”，并且长文件名可以垂直增长，而不会打扰任何一个侧面图标。

然后，我们可以：

.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 */
}

因此，基本上，我们使用的是块元素而不是内联元素，这样元素就不会像文本那样彼此缠绕。然后，我们要定义每个元素水平放置，使两个图标与标题的第一行对齐，并在不妨碍任何一个图标的情况下，为标题的元素提供最大的可能。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。