Fatal编程技术网
  • html/
  • Html 使用css将ul和span对齐到封闭div的最右侧

Html 使用css将ul和span对齐到封闭div的最右侧

html css reactjs

Html 使用css将ul和span对齐到封闭div的最右侧,html,css,reactjs,Html,Css,Reactjs,我在React组件中使用了span元素和reactstrap Nav元素。在浏览器中，html元素如下所示 <div class="alignRegFSBackContentsInSingleRow"> <span class="angleLeftNavigateBack"/> <ul class="nav"> <li class="nav-item&q

我在React组件中使用了span元素和reactstrap Nav元素。在浏览器中，html元素如下所示

<div class="alignRegFSBackContentsInSingleRow">
    <span class="angleLeftNavigateBack"/>
    <ul class="nav">
        <li class="nav-item">
            <a class="sc-bdVaJa hBLssO nav-link" id="wizardPreviousButton">Basic Info</a>
        </li>
    </ul>
    <ul class="nav" id="nextButtonNav">
        <li class="nav-item" id="nextButtonNavItem">
            <a class="sc-bwzfXH bDoCBt nav-link" id="wizardNextButton">Collateral Details</a>
        </li>
    </ul>
    <span class="angleRightNavigateBack"/>
</div>
CSS-pf我正在使用跨距的两个箭头元素

.angleLeftNavigateBack::after{
    content: "\f104";
    font-family: "FontAwesome";
    font-size: medium;
    padding-left: 10px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}

.angleRightNavigateBack::after{
    content: "\f105";
    font-family: "FontAwesome";
    font-size: medium;
    padding-left: 5px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}
我的要求是将第二组and元素与container div内的最右侧对齐。我已尝试在span和ul上使用边距左侧：auto。还尝试了为container div验证content:space-between。还尝试了ul和span上的float:right，但没有任何效果

请帮忙。我肯定错过了一些愚蠢的事情

代码沙盒链接：

您可以使用以下代码调整无序列表的位置：

.nav{
   padding-left:0px;
}
可以使用以下代码调整无序列表的位置：

.nav{
   padding-left:0px;
}
我看了一下你的沙盒，最后注意到你在你的div中使用了两次nav组件。我以前从未尝试在同一个div中使用两个nav，但我认为bootstrap正在对它们应用样式，这使得你很难完成你想要做的事情。通过删除其中一个导航组件，并在同一个导航中包含两个导航项目，我相信我能够将样式应用于整个导航元素，以完成您试图完成的任务

<div className="alignAmendFSBackContentsInSingleRow">
  <span className="angleLeftNavigateBack"></span>
  <Nav className="navFormatting">
    <NavItem>
      <StyledLink
        id="wizardPreviousButton"
        onClick={() => {
          this.previousButtonClick();
        }}
      >
        Back
      </StyledLink>
    </NavItem>
    <NavItem id="nextButtonNavItem">
      <NextButtonStyledLink id="wizardNextButton">
        Next
      </NextButtonStyledLink>
    </NavItem>
  </Nav>
  <span
    style={{ marginLeft: "auto" }}
    className="angleRightNavigateBack"
  ></span>
</div>
可能还有其他方法可以完成您尝试使用两个导航组件所做的工作，但我希望此解决方案有助于提供一些指导

我查看了您的沙盒，最后注意到您在div中使用了两次导航组件。我以前从未尝试在同一个div中使用两个导航，但我认为bootstrap正在对它们应用样式化，这使得您很难完成所尝试的操作。通过删除其中一个导航组件，并在同一个导航中包含两个导航项目，我相信我能够将样式应用于整个导航元素，以完成您试图完成的任务

<div className="alignAmendFSBackContentsInSingleRow">
  <span className="angleLeftNavigateBack"></span>
  <Nav className="navFormatting">
    <NavItem>
      <StyledLink
        id="wizardPreviousButton"
        onClick={() => {
          this.previousButtonClick();
        }}
      >
        Back
      </StyledLink>
    </NavItem>
    <NavItem id="nextButtonNavItem">
      <NextButtonStyledLink id="wizardNextButton">
        Next
      </NextButtonStyledLink>
    </NavItem>
  </Nav>
  <span
    style={{ marginLeft: "auto" }}
    className="angleRightNavigateBack"
  ></span>
</div>
可能还有其他方法可以完成您尝试使用两个导航组件所做的工作，但我希望此解决方案有助于提供一些指导

通过保持所有代码的原样，我只是稍微修改了您的CSS。 刚刚在
.navFormatting
类中添加了
flex
属性 下面是更改后的代码

  .navFormatting li {
    display: flex;
    width: 100%;
 }
.navFormatting li:first-child {
    justify-content: flex-start;
 }
.navFormatting li:last-child {
    justify-content: flex-end;
}
导入“/styles.css”； 从“reactstrap”导入{Nav，NavItem}； 从“/StyledLink”导入StyledLink； 从“/NextButtonStyledLink”导入NextButtonStyledLink”； 导出默认函数App（）{ 返回( { 此.previousButtonClick（）； }} > 返回 下一个 ); } 
.App{
字体系列：无衬线；
}
.导航格式{
显示器：flex；
宽度：100%；
利润率：8px；
填充：0；
}
纳夫利先生{
显示器：flex；
宽度：100%；
}
李：第一个孩子{
调整内容：灵活启动；
}
李：最后一个孩子{
证明内容：柔性端；
}
.angleRightNavigateBack:：之后{
内容：“\f105”；
字体系列：“FontAwesome”；
字号：中等；
}
.angleLeftNavigateBack:：之后{
内容：“\f104”；
字体系列：“FontAwesome”；
字号：中等；
}
.AlignAmendsBackContentsSingleRow{
显示器：flex；
弯曲方向：行；
最大宽度：100%；
填充：0；
}
通过保持所有代码的原样，我只是稍微修改了您的CSS。 刚刚在
.navFormatting
类中添加了
flex
属性 下面是更改后的代码

  .navFormatting li {
    display: flex;
    width: 100%;
 }
.navFormatting li:first-child {
    justify-content: flex-start;
 }
.navFormatting li:last-child {
    justify-content: flex-end;
}
导入“/styles.css”； 从“reactstrap”导入{Nav，NavItem}； 从“/StyledLink”导入StyledLink； 从“/NextButtonStyledLink”导入NextButtonStyledLink”； 导出默认函数App（）{ 返回( { 此.previousButtonClick（）； }} > 返回 下一个 ); } 
.App{
字体系列：无衬线；
}
.导航格式{
显示器：flex；
宽度：100%；
利润率：8px；
填充：0；
}
纳夫利先生{
显示器：flex；
宽度：100%；
}
李：第一个孩子{
调整内容：灵活启动；
}
李：最后一个孩子{
证明内容：柔性端；
}
.angleRightNavigateBack:：之后{
内容：“\f105”；
字体系列：“FontAwesome”；
字号：中等；
}
.angleLeftNavigateBack:：之后{
内容：“\f104”；
字体系列：“FontAwesome”；
字号：中等；
}
.AlignAmendsBackContentsSingleRow{
显示器：flex；
弯曲方向：行；
最大宽度：100%；
填充：0；
}
您是否尝试过使用
display:flex；宽度：100%
或使用
显示：flex；flex grow:1
属性？如果可能，请在
stackbltiz
或任何其他合适的门户网站上创建一些工作示例，并共享链接。这将有助于我们更清楚地理解它。我不确定您在寻找什么，所以不打算提供答案，但有一件事会直接打乱您的HTML，那就是您不能像那样关闭span元素。使用。我建议查看的另一个内容是“自对齐CSS”属性。我使用上面的CSS类angleRightNavigateBack将样式边距左：“auto”添加到第二个跨距，并将AlignRegfsBackContentsSingleRow CSS类中的最大宽度更改为100%，它与右角对齐。我认为问题在于第二个
    现在。我给ul分配了左边距：“自动”，但它没有正确对齐right@HimanshuSaxena这是您尝试使用
    display:flex；宽度：100%
    或使用
    显示：flex；flex grow:1
    属性？如果可能，请在
    stackbltiz
    或任何其他合适的工具上创建一些工作示例