Question

我知道当您将login_required添加到request.user元素时，它会以相反的顺序显示，但如何修复订单以使其显示“正确”并位于网站的右侧？现在它显示在网站的float: right侧。我曾尝试阅读一些旧问题，但没有找到任何可以帮助我的内容，而且，如何在没有填充的情况下在li彩色标题的中间显示left？ header元素会起作用吗？

#333333

auto

我已尝试将.header { background-color: #333333; height: 50px; width: 100%; } .upper_header ul { margin: 0px; float: right; } .upper_header li { display: table-cell; vertical-align: middle; float: left; } .upper_header a { text-decoration: none; color: #fff; }添加到<div class="header"> <div class="headerContainer"> <ul class="upper_header"> <li><a href="#">Home</a> </li> <li><a href="#">About Us</a> </li> <li><a href="#">Team</a> </li> <li><a href="#">News</a> </li> <li><a href="#">Contact Us</a> </li> </ul> </div> </div>元素，将float: right添加到ul元素，然后订单正确，但其float: left在li。（很抱歉在一个帖子中提出两个问题，不想再等30分钟提交另一个问题。）

Answer 1

您可以将LI设置为display: inline-block，然后您不需要使用浮点数。然后可以使用text-align

对齐内联块元素

注意：内联块可以在元素之间产生空间，有关详细信息，请阅读此https://css-tricks.com/fighting-the-space-between-inline-block-elements/

.header {
  background-color: #333333;
  width: 100%;
  text-align: right;
}
.upper_header {
  width: 100%;
}
.upper_header li {
  display: inline-block
}
.upper_header a {
  padding: 5px 10px;
  display: block;
  text-decoration: none;
  color: #fff;
}

<div class="header">
  <div class="headerContainer">
    <ul class="upper_header">
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">About Us</a>
      </li>
      <li><a href="#">Team</a>
      </li>
      <li><a href="#">News</a>
      </li>
      <li><a href="#">Contact Us</a>
      </li>
    </ul>
  </div>
</div>

Answer 2

首先 - 你的代码中有一些错误，在你使用.upper_header ul的CSS中，但这在你的上下文中不是正确的语法。正确的是ul.upper_header（您的ul列表不在类upper_header下，但在同一级别上），因此对您没有效果。

如果您不需要那么多嵌套div而不需要那么多类，请阻止使用它。示例如下（这是具有居中菜单的解决方案）：

.header ul {
    text-align: center;
    list-style: none;
}
.header li {
    display: inline-block;
}

http://jsfiddle.net/aqhesrjn/4/

然后，您可以轻松地使用text-align: right元素

中的ul

.header ul {
    text-align: right;
    list-style: none;
}
.header li {
    display: inline-block;
}

http://jsfiddle.net/aqhesrjn/3/

Answer 3

略微修改的CSS＆amp;你使用了错误的选择器（.upper_header ul）而不是ul.upper_header。

ul.upper_header ==> center to align center ul.upper_header ==> right to align right

.header {
  background-color: #333333;
  height: 50px;
  width: 100%;
}
ul.upper_header {
  margin: 0px;
  text-align: center;
}
.upper_header li {
  display: inline-block;
}
.upper_header a {
  text-decoration: none;
  color: #fff;
}

<div class="header">
  <div class="headerContainer">
    <ul class="upper_header">
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">About Us</a>
      </li>
      <li><a href="#">Team</a>
      </li>
      <li><a href="#">News</a>
      </li>
      <li><a href="#">Contact Us</a>
      </li>
    </ul>
  </div>
</div>

Answer 4

你也可以这样做，这是可用的众多选项中的一个，具体取决于当然你想要得到的最终结果。你正在以错误的方式使用那个upper_header类，你甚至不需要它。

.header {
  background-color: #333333;
  height: 50px;
  width: 100%;
}
.headerContainer{width:30%;
float:right;}

.headerContainer ul li {
 display:inline;
}

.headerContainer ul li a {
  text-decoration: none;
  color: #fff;
}

如何修复反向标题？

4 个答案: