Question

我正在尝试使用左侧的项目名称和右侧的状态创建导航。我想将这两个项目保留在同一个列表中，但我的问题是我无法正确地将状态文本浮动并且仍然是正确的。

以下是我要创建的内容

这是我目前的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>

我向右漂移了跨度，但在此之后我无法离开它。我试过有两个列表，一个是名字，一个是状态。这有效，直到我尝试添加悬停或活动状态。

我觉得我错过了一些明显的东西，但我似乎无法弄明白。任何帮助是极大的赞赏。谢谢

Answer 1

跨度中的文本在技术上是左对齐的，即使在向右浮动之后，只是跨度的宽度仅与文本一样宽。所以左，右，中心对齐所有看起来都一样。在跨距上设置最小宽度，您就可以控制文本对齐。类似的东西：

private void captureScreen(final Context context) {
    new Thread(){
        @Override
        public void run() {
            View view = ((Activity) context).findViewById(android.R.id.content);
            Bitmap bmp = Bitmap.createBitmap(view.getWidth(), view.getHeight(),
                    Bitmap.Config.ARGB_8888);

            if (null != bmp) {
                view.draw(new Canvas(bmp));
                stack.push(bmp);                            
            }
        }
    }.start();       
}

Answer 2

这不是解决浮动问题的完全解决方案，但为什么你不能在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和vertical-align：middle。

然后对于.status范围，您可以设置text-align：right以使其正确对齐。

向左浮动，左对齐列表

2 个答案: