时间戳

首页 > 解决方案 > 如何在html中获得彼此相邻的a标签和ap标签

html - 如何在html中获得彼此相邻的a标签和ap标签

问题描述

我有这个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和 p 标签？result.title我正在尝试使用 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
      }
    }

它目前看起来像这样：

在此处输入图像描述

和

在此处输入图像描述

但我想要右侧粗体标题旁边的查看按钮。我该怎么做呢？应该有足够的空间来放置右侧的视图按钮。

标签： htmlcss

解决方案

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

要强制inline-block元素显示在一行上，您可以强制执行一个max-width允许两个元素出现在一行上的选项。（请记住，如果元素之间有任何空白字符，则将两者都设置为 50% 宽度会导致元素出现在新行上，例如<div></div> <div></div>）

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

推荐阅读