1
我有包含用戶帖子的標籤，在發佈第二個狀態後，所有內容都脫離標籤內容區域，使頁面看起來非常糟糕。從我的div溢出的項目
這是我在與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通常很安靜，所以得到一些答案可能只是一個等待問題。 –