为什么面包屑文本无法正确对齐？

Question

HTML代码 和CSS在这里

.breadcrumb-container {
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  background-color: #044A67;
  color: #d5d5d5;
}

.breadcrumb {
  margin: 0;
  padding: 20px 0;
  list-style: none;
  background-color: transparent;
  font-size: 13px;
  letter-spacing: 0.1em;
  -webkit-border-radius: 0;
  -khtml-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
}

<div class="breadcrumb-container">
            <div class="container text-right">
                <ol class="breadcrumb">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li class="active">Time Table <i class="fa fa-arrow-down ml5"></i></li>
                </ol>
            </div>
        </div>

，但是问题是面包屑显示在左侧。我如何正确调整面包屑？

Answer 1

这是您想要的吗？添加了display:inline-block和float:right

.breadcrumb-container {
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  background-color: #044A67;
  color: #d5d5d5;
}

.breadcrumb {
  margin: 0;
  padding: 20px 0;
  list-style: none;
  background-color: transparent;
  font-size: 13px;
  letter-spacing: 0.1em;
  -webkit-border-radius: 0;
  -khtml-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
  display:inline-block;
  float:right;
}

.container:after{
content:"";
clear:both;
display:table;}

<div class="breadcrumb-container">
            <div class="container text-right">
                <ol class="breadcrumb">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li class="active">Time Table <i class="fa fa-arrow-down ml5"></i></li>
                </ol>
            </div>
        </div>

Answer 2

Bootstrap在v4中删除了pull-left和pull-right，并用float-left和float-right代替了它。

<nav aria-label="breadcrumb" class="breadcrumb d-flex justify-content-between">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>

        </ol>   
    <a href="#">Basket</a>  
    </nav>

Answer 3

您可以使用以下CSS代码使面包屑正确对齐。

.text-right { text-align: right; }

Answer 4

您可以使用flexbox实现此目的。这是2个选项

Fiddle demo

.breadcrumb-container {
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  background-color: #044A67;
  color: #d5d5d5;
}

.breadcrumb {
  margin: 0;
  padding: 20px 0;
  list-style: none;
  background-color: transparent;
  font-size: 13px;
  letter-spacing: 0.1em;
  -webkit-border-radius: 0;
  -khtml-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
}

ol {
  display: flex;
  justify-content: flex-end;
}

li {
  margin: 0 5px;
}

.invert ol {
  justify-content: flex-start;
  flex-direction: row-reverse;
}

<div class="breadcrumb-container">
            <div class="container text-right">
                <ol class="breadcrumb">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li class="active">Time Table <i class="fa fa-arrow-down ml5"></i></li>
                </ol>
            </div>
        </div>
        
        
        <div class="breadcrumb-container invert">
            <div class="container text-right">
                <ol class="breadcrumb">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li class="active">Time Table <i class="fa fa-arrow-down ml5"></i></li>
                </ol>
            </div>
        </div>