Question

我正试图让'ADD'和搜索框并排坐在一起，并排对齐。

我已经检查了其他答案，我已经实现了一个内联块解决方案，它们并排坐在一起（但由于某种原因，它不适用于小提琴）。如何将元素与父元素的右侧对齐？

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

Fiddle

Answer 1

JSFiddle默认不使用SCSS。展开左侧的“语言”菜单，选择“SCSS”而不是“CSS”。这应该导致元素并排排列。

要将导航器向右对齐，请使span6的宽度为50％，并使向右导航/文本对齐。

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

Fiddle

Answer 2

Erik Gillepsie是对的。这是你的小提琴CSS结构，并带有正确的HTML输入标签：http://jsfiddle.net/6MY8g/

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

编辑：右对齐（只有第二个div），在你的div中添加一个“右”的类，让它向右浮动。

Answer 3

你的CSS在小提琴中的格式不正确。不改变小提琴中的代码行即。通过正确地缩进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;
}

它工作正常。见这里 - ＆gt; http://jsfiddle.net/9p2VM/8/

希望这有帮助!!!

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>

Answer 5

所以，如果我正确理解你，你想要标题“文章管理器”，搜索框和ADD链接都在同一行。并且，您希望“文章管理器”在左侧，搜索和添加组在右侧对齐，是否正确？

为您的行创建一个容器，并将所有内容放入其中，并将其赋予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/

内联块 - 对齐到右边？

5 个答案: