html - 如何将 定位到左侧，将 定位到右侧(不偏离表格)？

Question

如何向上移动按钮:+、<、垃圾桶，同时级别不会被重新定位或在此过程中离开表单？

我尝试了各种策略，例如使用 float 、填充、边距、文本对齐，但似乎没有一个能正确完成工作。

// Place all the styles related to the Values controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
.america {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  padding-left: 1.2em;
  padding-right: 1.2em;
}

.missed {
  text-align: right;
  color: #c0392b;
  font-weight: bold;
  clear: both;
}

.collection_check_boxes {
  margin-left: 3px;
  margin-right: 6px;
}

.committed {
  text-align: center;
}

.america2 {
  padding-top: .7em;
}

.btn-group {
  background: #c0392b;
  border: #000;
  border-radius: 8px;
  font-family: verdana, arial, helvetica, sans-serif;
  color: #ffffff;
  font-size: 15px;
  padding: 8px 18px 8px 18px;
  text-decoration: none;
}

.category {
  width: 8%
}

.valuation {
  width: 70%
}

td {
  padding-top: .7em;
  padding-bottom: .7em;
  padding-left: .7em;
  padding-right: .7em;
}

.btn {
  background: #c0392b;
  border: #000;
  border-radius: 8px;
  font-family: verdana, arial, helvetica, sans-serif;
  color: #ffffff;
  font-size: 15px;
  padding: 8px 18px 8px 18px;
  text-decoration: none;
}

f.text_field {  
    margin: 5px 5px 0px 5px;
  }

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.btn:active{
  color: #FFFFFF;
}

.valuations-button {
  margin-top : -9px;
  margin-left : 10px; 
}



<%= simple_form_for(@habit) do |f| %>
  <%= f.error_notification %>

  <div class="america">
  <form>
      <div class="committed">
<%= f.label "Committed to:" %>&nbsp;
<%= f.collection_check_boxes :committed, Date::DAYNAMES, :downcase, :to_s %>
</div>


    <p><div class="date-group">
      <label> Started: </label>
      <%= f.date_select :date_started, :order => [:month, :day, :year], class: 'date-select' %>
    </div></p>

    <p><%= f.text_field :trigger, class: 'form-control', placeholder: 'Enter Trigger' %></p>
    <p><%= f.text_field :action, class: 'form-control', placeholder: 'Enter Action*' %></p>
    <p><%= f.text_field :target, class: 'form-control', placeholder: 'Enter Target' %></p>
    <p><%= f.text_field :positive, class: 'form-control', placeholder: 'Enter Pos. Reward' %></p>
    <%= f.text_field :negative, class: 'form-control', placeholder: 'Enter Neg. Consequence' %>

  <div class="missed">
  <%= f.label "Level 1:" %>&nbsp;
  <%= f.collection_check_boxes :missed, Habit::ONEMISSED, :downcase, :to_s %>
  </br>
  <%= f.label "Level 2:" %>&nbsp;
  <%= f.collection_check_boxes :missed, Habit::TWOMISSED, :downcase, :to_s %>
  </br>
  <%= f.label "Level 3:" %>&nbsp;
  <%= f.collection_check_boxes :missed, Habit::THREEMISSED, :downcase, :to_s %>
  </br>
  <%= f.label "Level 4:" %>&nbsp;
  <%= f.collection_check_boxes :missed, Habit::FOURMISSED, :downcase, :to_s %>
  </br>
  <%= f.label "Level 5:" %>&nbsp;
  <%= f.collection_check_boxes :missed, Habit::FIVEMISSED, :downcase, :to_s %>
  </br>
  </div>


<div class="america2">
  <%= button_tag(type: 'submit', class: "btn") do %>
  <span class="glyphicon glyphicon-plus"></span>
  <% end %>

  <%= link_to habits_path, class: 'btn' do %>
  <span class="glyphicon glyphicon-chevron-left"></span>
  <% end %>

  <%= link_to @habit, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn' do %>
  <span class="glyphicon glyphicon-trash"></span>
  <% end %>
</div>
  <% end %>
  </form>
  </div>
</div>

Answer 1

不确定您是否尝试过 CSS 定位。假设您想要相对于表单元素向上移动按钮。

form {
  position: relative;
}

.america2 {
  position: absolute; 
  bottom: 50px; /* positioned 50px relative to bottom of the form */
  left: 0; 
}