代码之家 › 专栏 › 技术社区 › usernameabc

如何右对齐最后一个li?

html-lists list css html

usernameabc · 技术社区 · 6 年前

我正在尝试右对齐使用css的我确实尝试过做以下的工作,但没有成功。

我需要能够使 <ul class=“third level”> 的高度自动调整为 <div class=“right align”> 的高度,这取决于内容的内部长度。


   
    
     
      
       codepin
      
     
     
      如何正确对齐最后一个
      
       <li>
       
        ?
       
      
     
     
      
       
        
         我尝试了什么,但由于
         
          的高度而不起作用<div class=“right-align”>
          
           >
          
         
        
       
       
        
         
          
           
            第三级{
职位:相对;

}

三级李:最后一个孩子{
位置:绝对;
权利要求:0;
}
< /代码> 
<li><a href=“”>重置</a></li>
<li><a href=“”>网格</a></li>
<li><a href=“”>框架</a></li>
L>
<div class=“right-align”>
<img src=“https://via.placeholder.com/350x150”>
<h5>图像占位符</h5>
<P>协作矩阵并行增长策略,而不是出现“开箱即用”的思维。& lt;/p & gt;

<a href=“some path”>某些路径</a>
&L/DIV & GT;
&L./L>
</ul>.
           
          
         
        
       
       
        
         
          
           当前问题:
          
          
           
            
           
          
          
           期望输出:
          
          
           
            
            .
           
           
            
            
           
          
          
           
            我需要能够使
            
             <ul class="third-level">
            
            自动调整为
            
             <DIV class=“右对齐”>
            
            取决于内容的长度。
           
          
          
          
          
           
           
           
            codepin
           
          
          
           最后一个怎么排
           
            <理工大学;
           
           ?
          
          
           
            我尝试过但由于高度
            
             <DIV class=“右对齐”>
            
           
          
          
           
            .third-level {
  position: relative;
  
}

.third-level li:last-child {
  position: absolute;
  right: 0;
}
  
            <ul class="third-level">
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a></li>
          <li >
            <div class="right-align">
            <img src="https://via.placeholder.com/350x150">
            <h5>Image placeholder</h5>
            <p>Collaboratively matrix parallel growth strategies rather than emerging "outside the box" thinking. </p>
            
            <a href="#some-path">Some path</a>
            </div>
          </li>
        </ul>
           
          
          
           当前问题:
          
          
           
            
           
          
          
          
          
           期望输出:

3 回复 | 直到 6 年前

Irina 6 年前

设置固定宽度 .third-level li:last-child . 比如200px或50%和 top: 0; 使其与顶部对齐。

.third-level {
  position: relative;
  
}

.third-level li:last-child {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
}

<ul class="third-level">
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a></li>
          <li >
            <div class="right-align">
            <img src="https://via.placeholder.com/350x150">
            <h5>Image placeholder</h5>
            <p>Collaboratively matrix parallel growth strategies rather than emerging "outside the box" thinking. </p>
            
            <a href="#some-path">Some path</a>
            </div>
          </li>
        </ul>

symlink 6 年前

您可以使用CSS网格实现类似的功能:

.third-level {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

<ul class="third-level">
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a></li>
          <li >
            <div class="right-align">
            <img src="https://via.placeholder.com/350x150">
            <h5>Image placeholder</h5>
            <p>Collaboratively matrix parallel growth strategies rather than emerging "outside the box" thinking. </p>
            
            <a href="#some-path">Some path</a>
            </div>
          </li>
        </ul>

Alex 6 年前

我会使用CSS flex 实现这一点的属性。正如@cale_b在您的评论中提到的,它强烈建议您为您真正想要的设计更改无意义的标记。

.third-level {
  display:flex;
  flex-flow:row wrap;
  width:100%;
  background: #b9deb9;
  padding:0; margin:0;
}

.third-level > div {
  flex-grow:1;
  
  border:1px solid red;
  margin:2px;
  width:45%;
}

.right-align{
}

<ul class="third-level">
          <div><a href="#">Resets</a></div>
          <div><a href="#">Frameworks</a></div>
          <div><a href="#">Grids</a></div>
          <div class="right-align">
            <img src="https://via.placeholder.com/350x150">
            <h5>Image placeholder</h5>
            <p>Collaboratively matrix parallel growth strategies rather than emerging "outside the box" thinking. </p>
            
            <a href="#some-path">Some path</a>

          </div>
        </ul>