【发布时间】：2015-10-04 23:25:43
【问题描述】：
我有包含用户帖子的选项卡，在发布第二个状态后，所有内容都从选项卡内容区域中掉出来，使页面看起来非常糟糕。
这是我在使用 dashboard.html.erb 时遇到错误的代码，
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<label for="tab1">Profile</label>
<div id="tab-content-1" class="tab-content animated fadeIn">
<div class="panel panel-default-blue">
<%= form_for :post, url: posts_path do |f| %>
<div class="panel-heading">
<i class="fa fa-pencil-square"></i> <p class="status">Status</p>
<p class="divider-for-status">|</p>
</div>
<div class="panel-body">
<%= f.text_area :body, placeholder: "What's new?" %>
</div>
<p>
<%= f.submit %>
</p>
<% end %>
<% @posts.each do |post| %>
<div class="panel panel-default">
<div class="panel-heading-gray"> <%= image_tag @user.profile_picture.url(:thumb) %> <h5 class="user-name"><%= @user.name %></h5> <h6 class="time-posted"><%= post.created_at.strftime("%B, %d, %Y") %></h6>
</div>
<div class="panel-body"><%= link_to post.body, post %></div>
<div class="panel-footer">
<h5>Add a comment:</h5> <p class="Like-option">Like ·</p>
<p class="comment-form">Comment - </p>
<p class="view-option">· View</p>
<p class="comment-profile-picture">
<%= image_tag @user.profile_picture.url(:thumb) %>
</p>
<div class="comments-stream">
</div>
<div id="comments-form">
</div>
</div>
</div>
</div>
</div>
</li>
这里是这些dashboard.css.scss的css，
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 650px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 12px auto;
box-shadow: 1.5px 1px rgba(0, 0, 0, 0.3);
}
.tabs li{
float: left;
}
.tabs label:hover {
background: rgba(255,255,255,0.5);
top: 0;
}
.tabs label {
display: block;
padding: 10px 20px;
border-radius: 2px 2px 0 0;
color: #08C;
font-size: 15px;
font-weight: normal;
font-family: 'Lily Script One', helveti;
background: rgba(255,255,255,0.2);
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
[id^=tab]:checked + label {
background: #08C;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
.tab-content-1 {
z-index: 2;
display: none;
text-align: left;
height: auto;
line-height: 140%;
padding-top: 10px;
background: white;
padding: 15px;
position: absolute;
top: 53px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
box-shadow: 1.5px 1px 25px rgba(0, 0, 0, 0.3);
margin-top: -12px;
}
我将发布您可能需要查看的任何其他代码，甚至更多细节，感谢您的帮助！
【问题讨论】：
-
发布问题的现场演示/jsfiddle 可能会有所帮助，这样人们就可以很容易地看到问题所在。此外，Stack Overflow 在周日通常很安静，因此获得一些答案可能只是等待的问题。
标签： html css ruby-on-rails