Question

我已经尝试了很多CSS规则，试图让我的列表在自定义Wordpress主题中使用的Bootstrap 4行中向右浮动。我尝试在行上使用align-right（在我自己的CSS中或使用Bootstrap 4类）并在列表本身上使用float：right（在我自己的CSS中或使用Bootstrap 4类）。我可能做错了，因为我可能在测试时忘记了脑中的组合：O

这是我的结构的小提琴： https://jsfiddle.net/Katrina_B/o3u0cd9s/

请务必在广阔的浏览器空间中查看。

目标：我希望导航列表（#navMenu）在#fruits行内对齐（顺便说一句，应该是紫色的！）

我能实现这一目标的唯一方法是更改html以使#fruits不是Bootstrap行，而是将其设置为100％宽度并将列表浮动到右侧，但这会弄乱整个布局。我设法找到了一些其他的解决方法，但它们导致我的脚本出现问题，使#jumbo div保持在全视口高度（减去#headerContainer高度，这是动态的）。

我可能会忘记一些其他的警告，管理它，但它会对其他东西产生负面影响。但我认为我已经涵盖了基础知识，目前我处于亏损状态。

另一个可能成为问题的因素，虽然我在这里使用普通的html复制了这个问题，但最终#menuNav将通过Wordpress函数生成，如下所示：

<?php
  wp_nav_menu( array(
  'theme_location'  => 'menu-1',
  'menu_id'         => 'primary-menu',
  ) );
?>

但我认为这不会影响我目前的问题。

提前感谢任何可能提供帮助的人！

Answer 1

尝试以下方法。 width：100％使列表移动到页面的长度，而text-align right将右对齐列表。我在Firefox和Chrome以及IE11中测试过。

#navMenu {
  background-color:#f7d765;
  padding:0 0 0 10px;
  margin:0;
  width:100%;
  text-align:right;
}

似乎无法在Bootstrap 4行内向右浮动列表

1 个答案: