Float right，Left justify列表中的項目

我正在嘗試在左側創建一個項目名稱並在右側顯示狀態。我想將這兩個項目都放在同一個列表中，但是我的問題是我無法正確地浮動狀態文本，仍然有理由。Float right，Left justify列表中的項目

這是我想創建

這裏是我當前的HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="col-xs-4"> 
 
    <p class="list-title">Blueprint</p> 
 
    <ul> 
 
    <li><a href="#">Executive Summary <span>Dean Approved</span></a></li> 
 
    <li><a href="#">Mission, Vision, Values <span>In Progress</span></a></li> 
 
    <li><a href="#">Unit Goal Management <span>In Progress</span></a></li> 
 
    </ul> 
 

 
    <p class="list-title">Outcomes</p> 
 
    <ul> 
 
    <li><a href="#">Goal Outcomes <span>Dean Approved</span></a></li> 
 
    <li><a href="#">Academic Intivates <span>Dean Approved</span></a></li> 
 
    <li><a href="#">Faculty Information <span>In Progress</span></a></li> 
 
    <li><a href="#">Teaching <span>Dean Approved</span></a></li> 
 
    <li><a href="#">Student Recruiting &amp; Retention <span>Pending Dean Approval</span></a></li> 
 
    <li><a href="#">Faculty Award Nomination <span>Pending Dean Approval</span></a></li> 
 
    <li><a href="#">Faculty Awards <span>In Progress</span></a></li> 
 
    <li><a href="#">Community Engagement <span>Dean Rejected</span></a></li> 
 
    <li><a href="#">Collaborations <span>In Progress</span></a></li> 
 
    <li><a href="#">Campus Climate &amp; Inclusion <span>Not started</span></a></li> 
 
    <li><a href="#">Concluding Remarks <span>Not started</span></a></li> 
 
    </ul> 
 
</nav>

我浮動跨度的權利，但我也沒辦法在此之後向左邊證明。我試過有兩個名單，一個是名字和一個是狀態。這工作，直到我嘗試添加懸停或活動狀態。

我覺得我缺少一些明顯的東西，但我似乎無法弄清楚。任何幫助是極大的讚賞。謝謝

來源

2017-06-20 lilfinn

爲標題添加一個標記（例如''），以便您能夠操作它。從那裏，我很確定你知道該怎麼做。另外，在提問時，請先閱讀指南。標題幾乎沒有意義。 – Wax

跨度中的文本在技術上是左對齊的，即使在浮動右邊之後，它只是跨度的寬度只與文本一樣寬。所以左，右，中心對齊看起來都一樣。在跨度上設置最小寬度，您將能夠控制文本對齊。例如：

ul > li > a > span { 
    float: right; 
    min-width: 200px; 
    /* text-align: left */ /* it's left by default */ 
}

來源

2017-06-20 02:30:00

這不完全是你的浮動問題的解決方案，但爲什麼你不能在span元素上使用display：inline-block？

所以從分手的代碼清單：

<li><a href="#">Executive Summary <span>Dean Approved</span></a></li>

到

<li><a href="#"><span class="title">Executive Summary</span> <span class="status">Dean Approved</span></a></li>

然後設置兩個跨度爲顯示：inline-block的和垂直對齊：中間。

然後對於.status範圍，您可以設置文本對齊：右對齊。

來源

2017-06-20 02:28:43

感謝您的建議。我嘗試過這種方法，但似乎沒有效果。狀態範圍仍然違背標題跨度。 – lilfinn

Float right，Left justify列表中的項目

回答

相關問題