位元件向右

我有對齊元素向右後續位元件向右

HTML

<div class="flex-row"> 
    <div class="flex-1"> 
      <button class="el-button el-button--primary">Add File</button> 
      <ul class="el-upload"> 
       <li classs="el-upload">something wider than the button</li> 
      </ul> 
    </div> 
</div>

CSS

.flex-row { 
    display: flex; 
    align-items: baseline; 

    .flex-1 { 
    flex: 1 1 auto; 
    } 
}

但是，當他列表的內容比按鈕更寬，並且它是這樣的：

------- 
| X | 
------- 
----------------- 
|    | 
-----------------

無論下面的元素的寬度如何，我如何使它對齊到右側？就像這樣：

  ------- 
      | X | 
      ------- 
----------------- 
|    | 
-----------------

來源

2017-10-11 Alfie McNarutoad

我們沒有你的CSS就不能做很多事情。據我所知flex-1不是自舉類，是嗎？ – SourceOverflow

我使用的類來自Element UI。當你聲明它的組件然後呈現這些元素時，它們會被打包。因此，按鈕和列表。我剛剛添加它，因爲我認爲它可能有幫助（也許？） –

@ SourceOverflow和是的Flex-1不是引導程序。我應用編輯我的問題更有意義！ –

噓tstrap 4有許多類現成的和靈活的箱子。查看更多https://v4-alpha.getbootstrap.com/utilities/flexbox/瞭解可用性。

例如用類結構更新

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="flex-row "> 
 
    <div class="row justify-content-end"> 
 
      <button class="el-button el-button--primary">Add File</button> 
 
      <ul class="el-upload"> 
 
       <li classs="el-upload">something wider than the button</li> 
 
      </ul> 
 
    </div> 
 
</div> 
 

 
or is it about column ? 
 

 
<div class="flex-row"> 
 
    <div class="row flex-column align-items-end"> 
 
      <button class="el-button el-button--primary">Add File</button> 
 
      <ul class="el-upload"> 
 
       <li classs="el-upload">something wider than the button</li> 
 
      </ul> 
 
    </div> 
 
</div> 
 
</div>

以模擬flex容器，使用類如.row，.d-flex，請參閱前面的鏈接提供的;）...

來源

2017-10-11 18:26:41

-1

您需要浮動兩個元素

這應該工作

https://codepen.io/dawsonhudson17/pen/GMGPjM

<div class="flex-row"> 
    <div class="flex-1"> 
      <button style='float: left;'class="el-button el-button--primary">Add File</button> 
      <ul class="el-upload"> 
       <li style='float: left; margin-left: 20px;'classs="el-upload">something wider than the button</li> 
      </ul> 
    </div> 
</div>

你也可以做

<li style='float: right;'classs="el-upload">something wider than the button</li>

來源

2017-10-11 18:14:08

回答

相關問題