Html CSS:只修改类中的一个元素

Html CSS:只修改类中的一个元素,html,css,ruby-on-rails,Html,Css,Ruby On Rails,请看下图: 我当前的用户界面: 我有一个类,,它修改创建的每个帖子 我的问题是,我想修改“编辑”和“删除”图标按钮,而不影响类的其余部分。具体来说,我想把它们都移到柱子的右上角 现在,我知道我可以创建一个单独的类(或ID);但是,类如何知道我正在引用newsfeed类?例如,如果我想把它们固定在右边,它们怎么知道应该粘在盒子的右边而不是页面上 非常感谢所有的帮助。任何能为我提供所需CSS的人都将获得巨额奖金。:) 谢谢大家 编辑-以下是我的视图中包含的所有当前代码: <% if @p

请看下图:

我当前的用户界面:

我有一个类,
,它修改创建的每个帖子

我的问题是,我想修改“编辑”和“删除”图标按钮,而不影响类的其余部分。具体来说,我想把它们都移到柱子的右上角

现在,我知道我可以创建一个单独的类(或ID);但是,类如何知道我正在引用newsfeed类?例如,如果我想把它们固定在右边,它们怎么知道应该粘在盒子的右边而不是页面上

非常感谢所有的帮助。任何能为我提供所需CSS的人都将获得巨额奖金。:)

谢谢大家

编辑-以下是我的视图中包含的所有当前代码:

   <% if @posts.any? %> 
  <% @posts.each do |post| %>
    <div id="post_<%= post.id %>">
      <div class ="newsfeed">
        <div class="well">
          <% if post.user.has_image? %>
            <div class="profile_pic"><%= image_tag post.user.images.first.file(:profile), class: "img-thumbnail", alt: "Cinque Terre", width: "50", height: "50" %></div>
          <% else %>
            <div class ="profile_pic"><%= image_tag "default_user_image.png",class: "img-thumbnail", alt: "Cinque Terre", width: "50", height: "50" %></div>
          <% end %>
        <div class="name_and_time">
          <a href="/users/<%= post.user.id %>/show"><%= post.user.first_name %> <%= post.user.last_name %></a><br>
          <span><%= post.created_at.strftime("%d %b %Y %H:%M") %></span>
        </div>
        <% if !post.image.exists? %>
          <h2> <%= post.text %> </h2>
        <% else %>
          <h2> <%= link_to post.text, post_path(post) %> </h2>
          <%= link_to post_path(post) do %>
            <p><%= image_tag post.image.url(:medium) %></p>
            <% end %>
        <% end %>
        <% if @user %>
          <% if current_user.voted_up_on?(post) %>
            <%= link_to "Like", dislike_post_path(post), method: :put %>
          <% else %>
            <%= link_to "Like", like_post_path(post), method: :put %>
          <% end %>
        <% end %>
        <%= "#{post.get_upvotes.size} | " %>
        <div class="edit_and_delete_posts">
        <% if post.user == current_user %>
          <%= link_to edit_post_path(post) do %>
            <span class="glyphicon glyphicon-pencil"></span>
          <% end %>
          <%= link_to post_path(post), method: :delete do %>
            <span class="glyphicon glyphicon-trash"></span>
          <% end %>
        </div>
          <div class='comments_div'>
            <%= render post.comments %>
          </div>
          <% if current_user %>
            <%= form_for [post, post.comments.new ], remote: true do |f| %>
              <%= f.text_area :text, placeholder: 'Add a comment' %>
              <%= f.submit 'Comment' %>
              <% end %>
          <% else%>
            <p>You need to <%= link_to "sign in", new_user_session_path %> to comment</p>
          <% end %>
        <% end %>
        </div>
      </div>
    </div>
  <% end %>
<% else %>
    No posts have been added!
<% end %>


你需要发表评论

没有帖子被添加!
如果您发布完整编译的HTML和CSS,我可以向您展示一个工作演示,但您需要添加以下内容:

.newsfeed {
    position:relative;
}
.edit_and_delete_posts {
    position:absolute;
    top:0;
    right:0;
}
通过将
position:absolute
添加到
.edit\u和\u delete\u posts
div,它将从流中拉出,这样就不会影响其余元素。然后可以将其设置为
顶部
右侧
位置;这会将其设置为具有相对位置的最近祖先元素的右上角。由于
.newsfeed
具有
位置:相对
它是最近的祖先,因此
。编辑和删除帖子将相对于此进行定位


然后,如果需要,您可以添加额外的边距或填充以对其进行微调。

发布一个
的完整HTML。嘿!好的,不过你介意我问一下为什么回答这个主要问题有必要吗?谢谢你的时间。你已经发布了CSS。我问了一个
的完整HTML(包括所有子元素)。为了决定如何调用elementsHow,有必要了解其结构?对于有点粗制滥造的格式表示歉意——我将尽快对其进行编辑,使其看起来更整洁。