内联块元素 - 右对齐？

Question

我想让“ADD”和搜索框并排放置，并将它们右对齐。

我查看了其他答案，并实现了一个inline-block的解决方案，它们并排放置（但出于某种原因，在fiddle中无法正常工作）。如何将这些元素对齐到它们父元素的右侧？

<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>

示例代码

- panthro

Answer 1

默认情况下，JSFiddle不使用SCSS。请在左侧的语言菜单中选择“SCSS”而不是“CSS”。这样应该使元素并排对齐。

要将导航栏向右对齐，请使两个span6的宽度都为50%，并将导航栏设置为右浮动/右对齐。

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

Fiddle

- Erik Gillespie

---

啊，我误解了你的问题。我在我的回答中添加了额外的信息。 - Erik Gillespie

Answer 2

Erik Gillepsie是正确的。这是您的CSS结构中的Fiddle，并带有正确的HTML输入标记：http://jsfiddle.net/6MY8g/

<input name="search" size="10" type="search" placeholder="Search" results=5 />

编辑：对于使第二个div右对齐，给你的div添加一个类名“right”，并将其向右浮动。

- Djouuuuh

Answer 3

你在 fiddle 中的 CSS 代码格式不正确。只需正确缩进 CSS，而无需更改 fiddle 中的任何代码，你的代码就可以正常工作。

以下是你的 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;
}

它运行良好。请看这里->http://jsfiddle.net/9p2VM/8/

希望这有所帮助!!!

- Satwik Nadkarny

---

@Kroltan 这应该在问题或标签中提到。从外观上看，它对我来说只是普通的CSS。 - Satwik Nadkarny

我同意，但无论如何...你的答案仍然是正确的。 - Kroltan

这并没有回答关于右对齐的问题。 - panthro

@panthro 没有注意到那部分。不过已经编辑了。请在答案中检查新的 fiddle 链接。 - Satwik Nadkarny

Answer 4

尝试这个：只需用以下代码替换您的代码即可。

<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>

- Aniket

Answer 5

所以，如果我理解你的意思正确的话，你想要标题“文章管理器”、搜索框和添加链接都在同一行。并且，你希望“文章管理器”在左边，搜索和添加组对齐到右边，是吗？

为你的行创建一个容器，把所有东西放进去，并给它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>

http://jsfiddle.net/9p2VM/7/

- Andrew Tran