在文本之间放置垂直分隔线

Question

我需要一个垂直分隔线，并且文本要像这样在屏幕的右上角完全对齐。

我什至无法显示分隔线和文本向右拖动

<div class="row">  
    <div class="float-right">
      <span>Profile & Settings</span>
    </div>
    <div class="float-right sep">  
         <div class="septText"></div>  
    </div>
    <div class="float-right">
      <span>Logout</span>     
    </div>  
</div>

Css

.sep {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .sepText {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
  }
  .sepText::before,
  .sepText::after {
    content: '';
    flex: 1;
    width: 1px;
    background: currentColor;
    /* matches font color */
    margin: .25em;
  }

Answer 1

我可以看到bootstrap 4标签已添加到您的问题中。如果您使用的是Bootstrap 4，则有一个内置的Flex实用程序https://getbootstrap.com/docs/4.0/utilities/flex/

<div class="d-flex flex-row justify-content-end">  
    <div class="">
        <span>Profile & Settings</span>
    </div>
    <div class="mx-2">|</div>
    <div class="">
        <span>Logout</span>     
    </div>  
</div>

JS小提琴：https://jsfiddle.net/8p27xwcs/

Answer 2

  use "container" instead of "row", or set display:inline or block on the row div.


 <div class="row" style="display:inline;" >  
<div class="float-right">
  <span>Profile & Settings</span>
</div>
<div class="float-right sep">  
     <div class="septText"></div>  
</div>
<div class="float-right">
  <span>Logout</span>     
</div>  
</div>

或

 <div class="container">

   <div class="float-right">
     <span>Profile & Settings</span>
    </div>
   <div class="float-right sep">  
     <div class="septText"></div>  
</div>
<div class="float-right">
  <span>Logout</span>     
</div>