當前一個容器溢出時，浮動右側屬性顯示不正確

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

我也試圖展示它作爲一個表格，但我沒有設法得到適當的文件名列的寬度。

編輯：這是問題的一個畫面：

我也試圖與自動換行：打破字;在docResult類，然後我得到了以下內容：

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> 

這樣我們就可以顯示它們爲「內聯塊「，並且具有長文件標題垂直增長而不中斷任何一側的圖標。

然後，我們可以：

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

所以，基本上我們使用塊，而不是在線元素元素，這樣的元素不圍繞着彼此像文本換。之後，我們正在定義我們希望每個元素水平放置，使兩個圖標與標題的第一行對齊，並儘可能地給標題的元素添加可能，而不會妨礙任一圖標。