Question

要点是左边的最大宽度对齐左边的ul，没有指定宽度的中心块总是居中（这个ul的内容可能会有所不同），右边的ul总是在我的顶部导航栏中以最大宽度向右浮动。

主要的问题是，当我指定ul的flex属性的宽度时，不能像我期望的那样工作：第3个ul必须与右边对齐，而第2个应该占用尽可能多的空间。对齐可以，但是第3个ul占用太多空间（超过需要的空间），并且视觉上没有浮动到右边。如果指定它的宽度来修复这个第2 ul的中心aligmnment将无法正常工作。所有元素都有不同的宽度，据我所知flex只能处理宽度相等的元素。

但是，我猜这是一个适合flex的行为。

HTML

<nav class="nav_wrapper" role="navigation">
    <ul class="nav navbar-nav navbar-left">
        <li data-item-id="nav-profile-menu">
            <a id="menu_toggle"><i class="fa fa-bars"></i></a>
        </li>
    </ul>
    <ul class="nav navbar-nav navbar-center">
        <li data-item-id="nav-profile-menu">
            <a class="summary" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="usd">
                <span class="summary-item">USD</span>
                <span>
                   <i class="fa fa-arrow-circle-o-down red hidden-sm hidden-xs" aria-hidden="true"></i>
                  99&nbsp;<span class="small-text hidden-sm hidden-xs">-0,0474</span>
                </span>
            </a>
        </li>
        <li data-item-id="nav-profile-menu">
            <a class="summary">
                <span class="summary-item">Brent</span>&nbsp;
                <span>
                    <i class="fa fa-arrow-circle-o-down red hidden-sm hidden-xs" aria-hidden="true"></i>
                  99&nbsp;<span class="small-text hidden-sm hidden-xs">-0,86%</span>
                </span>
            </a>
        </li>
        <li data-item-id="nav-profile-menu" class="hidden-xs">
            <a class="summary">
                <span class="summary-item">Ni</span>&nbsp;
                <span>
                    <i class="fa fa-arrow-circle-o-up green hidden-sm hidden-xs" aria-hidden="true"></i>
                  105,00&nbsp;<span class="small-text hidden-sm hidden-xs">1,29%</span>
                </span>
            </a>
        </li>
        <li data-item-id="nav-profile-menu" class="hidden-xs">
            <a class="summary">
                <span class="summary-item">Al</span>&nbsp;
                <span>
                    <i class="fa fa-arrow-circle-o-up green hidden-sm hidden-xs" aria-hidden="true"></i>
                  2131,50&nbsp;<span class="small-text hidden-sm hidden-xs">0,35%</span>
                </span>
            </a>
        </li>
    </ul>
    <ul class="nav navbar-nav navbar-auth">
        <li data-item-id="nav-profile-menu">
            <a href="/auth" data-toggle="modal" data-target="#login" id="reg-in" class="inline-block">                          <span>reg</span>&nbsp;<i class="fa fa-user-plus"></i></a><span></span>
        </li>
        <li data-item-id="nav-profile-menu" data-toggle="tooltip" title="" data-placement="bottom">
            <a href="/auth" data-toggle="modal" id="sign-in" data-target="#login" class="inline-block">                          <span>auth</span>&nbsp;<i class="fa fa-sign-in"></i></a>
        </li>
    </ul></nav>

Answer 1

为什么你不使用flex + absolute而你使用float？漂浮得更清洁，漂浮后不需要清理。

.nav_wrapper {
  position: relative;
  display: flex;
  justify-content: center;
}

.navbar-left {
  position: absolute;
  left: 0;
}

.navbar-auth {
  position: absolute;
  right: 0;
}

您可以删除ul

的宽度

左，中，右对齐具有柔性和不同宽度的元素

1 个答案: