Question

我有这个html：

<ol class="results-list">
    <% @results.sort_by { rand }.each do |result| %>
        <li class="<%= 'checked-out' if result.catalog_item.library_status == 'Checked out' %>">

            <div class="search-result">
                <%= link_to 'View', mobile_library_submission_checkout_path(result, search_term: params[:q], theme_id: @search_theme ? @search_theme.id : nil), method: :get, class: 'btn red view' %>
                <p class="title"><%= result.title %></p>

                <span class="meta">
                    <p class="display-name"><%= result.display_name %></p>
                    <% if result.theme %>
                        <p><%= result.theme.name %></p>
                    <% end %>
                    <p><%= result.location_string %></p>
                    <p class="tag-list"><%= result.tag_list.join(" / ") %></p>
                </span>
            </div>
        </li>
    <% end %>
</ol>

如何使link_to和带有result.title的p标签彼此相邻？我正在尝试使用display-inline，但无济于事...

.results-list {
    display: block;
    font-family: $reckless-medium;
    max-width: 400px;
    margin: 1em auto 0;
    counter-reset: item;
    list-style: none;

    .checked-out {
        color: $light-text;

        a {
            color: $light-text;

            .title { color: $light-text; }
        }

        .icon-caret-right-grey { background: none; }
    }

    .search-result {
      width: 40%;

      .view {
        display: inline-block;
        padding: 2% 14% 2% 14%;
        margin-left: 1%;
        margin-right: 2%;
        color: $white;
      }

      a.view {
        display: inline-block
      }

      p.title {
        display: inline-block
      }
    }

当前看起来像这样：

和

但是我想要右侧的粗体标题旁边的查看按钮。我该怎么做呢？应该有足够的空间适合右侧的查看按钮。

Answer 1

虽然inline-block元素可以显示在一行上，但它们自然会增长到其内容的大小，直至容器的边界。

要强制inline-block元素显示在一行上，可以强制执行max-width，以使两个元素都显示在一行上。（请注意，如果两个元素之间都存在空白字符，例如<div></div> <div></div>，则将宽度和宽度都设置为50％会使元素显示在新行上）

.container {
  display: block;
}

.a {
  display: inline-block;
  max-width: 45%;
  background-color: #800;
}

.b {
  display: inline-block;
  max-width: 45%;
  background-color: #080;
}

<div class="container">
  <div class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

我如何在HTML中彼此相邻获得一个标签和一个p标签

1 个答案: