Html 内联块-向右对齐？

我试图让“添加”和搜索框并排放置，并将它们对齐

我检查了其他答案，并实现了一个内联块解决方案，它们并排放置（但由于某些原因，它在小提琴上不起作用）。如何将图元与其父图元的右侧对齐

<div class="span6">
    <h2 class="pull-left">TITLE</h2>
</div>
<nav class="span6">
  <form action="/gateway" method="get">
     <input name="search" size="10" type="search" placeholder="Search" results=5>
  </form>
    <a class="btn" href="/add">ADD</a>
</nav>

标题

---

默认情况下，JSFIDLE不使用SCS。展开左侧的语言菜单，选择“SCSS”而不是“CSS”。这将导致元素并排对齐

要使导航向右对齐，请使span6的50%宽度和浮动/文本都与导航向右对齐

.span6{
    float: left;
    width: 50%;
}
nav{
    float: right;
    text-align: right;
    ...
}

---

埃里克·吉勒普西是对的。这是CSS结构中的小提琴，带有正确的HTML输入标记：

---

编辑：若要向右对齐（仅第二个div），请在div中添加一个类“right”，并使其向右浮动。

您的CSS在小提琴中的格式不正确。无需更改fiddle ie中的一行代码。只要正确缩进CSS，代码就可以正常工作

这就是您的CSS：

.span6{
    float: left;
}
nav{
    white-space: nowrap;
    .btn{
        display: inline-block;
    }
    form{       
        margin: 0;
        padding: 0;
        display: inline-block;
        input[type=search] {
            margin: 15px 0 0 0;
        }
    }
}

将其更改为：

.span6 {
    float: left;
}
nav.span6 {
    white-space: nowrap;
    float:right;
}
.btn {
    display: inline-block;
}
form {
    margin: 0;
    padding: 0;
    display: inline-block;
}
input[type=search] {
    margin: 15px 0 0 0;
}

而且效果很好。请参见此处->

---

希望这有帮助

试试这个：用这个替换你的代码

<div class="span6">
        <h2 class="pull-left">ARTICLE MANAGER</h2>
</div>
<nav class="span6">
    <form action="/gateway" method="get">
      <input name="search" size="10" type="search" placeholder="Search" results=5>
          <a class="btn" href="/add">ADD</a>
    </form>

</nav>

物品经理

因此，如果我理解正确，您希望标题“Article Manager”和搜索框以及添加链接都位于同一行。而且，您希望“文章管理器”位于左侧，搜索和添加组与右侧对齐，对吗

为您的行创建一个容器，将所有内容都放在其中，并为其提供100%的宽度，使其跨越页面的整个宽度。然后向左浮动标题，向右浮动搜索框组。做了，做了

<div class="header-container">
    <div class="span6 title">
            <h2 class="pull-left">ARTICLE MANAGER</h2>
    </div>
    <nav class="span6 search">
        <form action="/gateway" method="get">
          <input name="search" size="10" type="search" placeholder="Search" results=5>
        </form>
            <a class="btn" href="/add">ADD</a>
    </nav>
</div>

物品经理

---

@Kroltan，问题或标签中应该提到的。从外观上看，我觉得它很简单。我同意，但不管怎样。。。你的回答仍然正确。这并没有回答关于向右对齐的问题。@panthro遗漏了那部分。但还是编辑了它。检查答案中新的小提琴链接。啊，我误解了你的问题。我在回答中添加了其他信息。

<div class="header-container">
    <div class="span6 title">
            <h2 class="pull-left">ARTICLE MANAGER</h2>
    </div>
    <nav class="span6 search">
        <form action="/gateway" method="get">
          <input name="search" size="10" type="search" placeholder="Search" results=5>
        </form>
            <a class="btn" href="/add">ADD</a>
    </nav>
</div>