3

我编写了这个简单的代码：

Html

    <div class="row offset3">
      <div class="title">Title1</div>
        <div class="title-arrow">
           <a href="#"><i class="icon-arrow-left"></i>GoBack</a>
        </div>
    </div>

css

   .title{
      margin-top: 20px;
    }

   .title-arrow{
      margin-top: -22px;
      margin-left: 50px;
      margin-bottom: 14px;
    }

我的问题是，如果我将 Title1 更改为更大的标题，例如 titllleeeeeeeeeeeeeeee，箭头不会向右移动。好吧，我明白它的正常行为！我必须在类标题中放置一个属性边距。我试图放一个margin-right:10px;但没有任何反应..

4

3 回答 3

3

只需这样做：

HTML：

<div class="row offset3">
  <div class="title">Titleaa</div>
    <span class="title-arrow">
       <a href="#"><i class="icon-arrow-left"></i>GoBack</a>
    </span>
</div>

CSS

   .title{
      margin-top: 20px;
      display: inline;
    }

演示

该课程title-arrow不再需要，但如果您需要，它就在那里。

于 2013-09-27T09:14:17.593 回答
1

margin-left: 50px这是因为你在箭头上设置了一个固定的。您应该将其包装为标题 div 中的跨度。

看看：http ://bootply.com/83546

于 2013-09-27T09:13:08.713 回答
1

您正在使用两个块元素，它们在彼此下方呈现并且不知道它们前一个块的流程。这意味着如果标题变长，箭头不知道（也不应该），因为它是块级元素。它不应该受到它的影响。

您使用静态边距值移动了标题旁边的箭头。这些值不会改变，是的，这意味着如果标题变长，箭头将与其重叠。

相反，尝试通过使用 inline(-block) 元素或浮点数来利用文档流。试试这个例如：

.title，添加：

float: left

将整个规则替换为 .title-arrow：

.title-arrow {
    margin-top: 20px;
    line-height: 17px;
}

（这些值与标题的值相同，以确保它们处于相同的高度）

于 2013-09-27T09:13:53.430 回答