Question

我试图右对齐导航而不使用浮点数。我在网上看到我可以将父元素设置为text-align: right，但是当我尝试它时它没有用。我很感激任何帮助，因为我知道这是一个简单的问题，但是当天大部分时间都让我很困惑。

＆＃13;

header {
  background-color: #AEB7CC;
  padding: 0 10px;
}
nav {
  display: inline-block;
}
nav li {
  display: inline;
}

＆＃13;

<header>
  <a href="hi.php">hi</a>
  <nav>
    <ul>
      <li><a href="index.php">Home</a>
      </li>
      <li>bop</li>
      <li>bop</li>
      <li>bop</li>
    </ul>
  </nav>
</header>

＆＃13;

https://jsfiddle.net/a6a367vp/

Answer 1

一种可能的建议解决方案如下：

将<nav>放在<div>元素中，然后将text-align属性用于指定的div。像这样：

HTML：

<div class="nav_menu">
    <nav>
      <ul>
        <li><a href="index.php">Home</a></li>
        <li>bop</li>
        <li>bop</li>
        <li>bop</li>
        </ul>
    </nav>
</div>

CSS：

.nav_menu{
  text-align: right;
}

<强>更新

将<a>标记放在另一个div中，然后指定所选div的宽度。你的最终代码应该是这样的：

HTML：

<header>
  <div class="atag_div">
        <a href="hi.php">hi</a>
  </div>
  <div class="nav_menu">
    <nav>
      <ul>
        <li><a href="index.php">Home</a></li>
        <li>bop</li>
        <li>bop</li>
        <li>bop</li>
        </ul>
    </nav>
  </div>
</header>

CSS：

header {
    background-color: #AEB7CC;
    padding: 0 10px;
}

nav li {
    display: inline;
}

.atag_div{
    width: 20%; 
    display: inline-block;
}

.nav_menu{
  width: 78%;
  display: inline-block;
  text-align: right;
}

的jsfiddle：

VACUUM FULL previously which takes an exclusive lock as well:

Answer 2

~~解决方案是您必须将text-align: right;添加到父元素header。~~

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

~~然后将display: inline-block;添加到子项（nav），子项将对齐。~~

另一种解决方案是将宽度设置为nav和a：

header nav {
    with: 80%;
}

header a {
    width: 20%;
}

header nav ul {
    text-align: right;
}

header nav ul li {
    display: inline-block;
}

Answer 3

如果您希望导航向右移动，简单的方法是text-align:right，但由于您不想使用此方法，如果导航100% width，nav{width:98%; text-align:right};会将其置于右侧为那一行。因此，您可以执行以下两种操作之一。

现在使用 CSS 可以制作

var anchorTopWidth = $("a").width() / $('a').parent().width() * 100;
requiredWidth = 100-anchorTopWidth;
$('nav').css({'width': requiredWidth+'%', 'text-align':'right'});

或为了获得更好的效果，请使用 JS

ROW EXCLUSIVE

小提琴：https://jsfiddle.net/a6a367vp/3/

使用内联块而不是浮动

3 个答案: