我的第一个选项卡在下面的段落中运行。如何防止这种情况发生？
My first tab runs in the paragraph below. How to prevent this from happening?
在我的第一个选项卡上，您会看到文本是否很长，它会 运行 到它下面的段落中。我该如何防止这种情况？我不希望第一个选项卡中的文本 运行 进入其下方的文本。
我想将该段落移到标签区域下方。我可以在 .nav-tabs:after 中编辑高度，但是有更简单的方法吗？
我不想让它滚动。
Jsfiddle：
http://jsfiddle.net/huskydawgs/vm4d3a1q/32/
.nav-tabs {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
text-align: center;
}
.nav-tabs:after {
content: "";
clear: both;
display: block;
height: 242px;
}
.nav-tabs li {
display: inline-block;
}
.nav-tabs li > input {
display: none;
}
.nav-tabs li > label {
display: inline-block;
border: none;
border-right-width: 0;
border-bottom-width: 0;
height: 30px;
line-height: 30px;
padding: 5px 20px;
cursor: pointer;
border-radius: 3px 3px 0 0;
}
.nav-tabs li:last-child > label {
border-right-width: 1px;
}
.nav-tabs .nav-tab-content {
display: none;
position: absolute;
left: 0;
padding: 20px;
border-top: 1px solid #e2e3e4;
height: 200px;
text-align: left;
}
/* Functional */
.nav-tabs li > input:checked + label {
background-color: #2251a4;
color: #fff;
}
.nav-tabs li > input:checked ~ .nav-tab-content {
display: block;
}
<ul class="nav-tabs">
<li>
<input checked="checked" id="tab-1" name="tabs" type="radio" />
<label for="tab-1">First</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum fuga porro placeat enim cumque nobis, eum atque suscipit optio quibusdam dolores recusandae! Ab fugiat deserunt explicabo expedita delectus labore illum.</p>
<p>Harum facilis, dolore! Sed eligendi accusamus harum, earum error a praesentium! Esse laboriosam incidunt, suscipit possimus magnam nostrum voluptatem minima deserunt nisi, sint iste tenetur corporis itaque aspernatur neque explicabo.</p>
<p>Nobis nihil dolores optio! Aperiam laudantium ipsam alias enim, omnis voluptatem laboriosam, repudiandae magni, quas, quos in repellendus delectus! Vel consequatur tempora aperiam earum temporibus nemo cupiditate laudantium laboriosam, eos.</p>
<p>Quis eveniet delectus, earum rerum asperiores ducimus quos eaque ex tenetur corporis ullam hic quasi magni laborum necessitatibus impedit voluptates! Deleniti fuga aliquam ex. Reiciendis necessitatibus, obcaecati et labore aliquid.</p>
<p>Fuga odit at nostrum molestias, inventore deserunt tempore quae cupiditate nulla voluptatem earum doloribus quia iste, eum dignissimos totam similique ea unde asperiores! Vero unde rem laboriosam repellat sunt. Vel.</p>
</div>
</li>
<li>
<input id="tab-2" name="tabs" type="radio" />
<label for="tab-2">Second</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, quae quas nemo veniam ullam magnam dolorum vero! Quod animi a, quidem nostrum, explicabo laboriosam distinctio ea sint recusandae, et voluptatibus.</p>
</div>
</li>
<li>
<input id="tab-3" name="tabs" type="radio" />
<label for="tab-3">Third</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa laborum dolore officiis assumenda nihil quas nam, molestiae est corrupti! Tenetur, recusandae enim hic itaque cupiditate nisi quidem inventore voluptatum neque.</p>
</div>
</li>
<li>
<input id="tab-4" name="tabs" type="radio" />
<label for="tab-4">Fourth</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa laborum dolore officiis assumenda nihil quas nam, molestiae est corrupti! Tenetur, recusandae enim hic itaque cupiditate nisi quidem inventore voluptatum neque.</p>
</div>
</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum fuga porro placeat enim cumque nobis, eum atque suscipit optio quibusdam dolores recusandae! Ab fugiat deserunt explicabo expedita delectus labore illum. Harum facilis, dolore! Sed eligendi
accusamus harum, earum error a praesentium! Esse laboriosam incidunt, suscipit possimus magnam nostrum voluptatem minima deserunt nisi, sint iste tenetur corporis itaque aspernatur neque explicabo. Nobis nihil dolores optio! Aperiam laudantium ipsam
alias enim, omnis voluptatem laboriosam, repudiandae magni, quas, quos in repellendus delectus! Vel consequatur tempora aperiam earum temporibus nemo cupiditate laudantium laboriosam, eos.</p>
.nav-tabs{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
text-align: center;
}
.nav-tabs:after{
content: "";
clear: both;
display: block;
height: 242px;
}
.nav-tabs li{
display: inline-block;
}
.nav-tabs li > input{
display: none;
}
.nav-tabs li > label{
display: inline-block;
border: none;
border-right-width: 0;
border-bottom-width: 0;
height: 30px;
line-height: 30px;
padding: 5px 20px;
cursor: pointer;
border-radius: 3px 3px 0 0;
}
.nav-tabs li:last-child > label{
border-right-width: 1px;
}
.nav-tabs .nav-tab-content{
display: none;
position: absolute;
left: 0;
padding: 20px;
border-top: 1px solid #e2e3e4;
height: 200px;
text-align: left;
}
/* Functional */
.nav-tabs li > input:checked + label{
background-color: #2251a4;
color: #fff;
}
.nav-tabs li > input:checked ~ .nav-tab-content{
display: block;
}
section{position:relative;
margin-top:80px;
margin-left:20px;
margin-right:20px;}
<ul class="nav-tabs">
<li>
<input checked="checked" id="tab-1" name="tabs" type="radio" /> <label for="tab-1">First</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum fuga porro placeat enim cumque nobis, eum atque suscipit optio quibusdam dolores recusandae! Ab fugiat deserunt explicabo expedita delectus labore illum.</p>
<p>Harum facilis, dolore! Sed eligendi accusamus harum, earum error a praesentium! Esse laboriosam incidunt, suscipit possimus magnam nostrum voluptatem minima deserunt nisi, sint iste tenetur corporis itaque aspernatur neque explicabo.</p>
<p>Nobis nihil dolores optio! Aperiam laudantium ipsam alias enim, omnis voluptatem laboriosam, repudiandae magni, quas, quos in repellendus delectus! Vel consequatur tempora aperiam earum temporibus nemo cupiditate laudantium laboriosam, eos.</p>
<p>Quis eveniet delectus, earum rerum asperiores ducimus quos eaque ex tenetur corporis ullam hic quasi magni laborum necessitatibus impedit voluptates! Deleniti fuga aliquam ex. Reiciendis necessitatibus, obcaecati et labore aliquid.</p>
<p>Fuga odit at nostrum molestias, inventore deserunt tempore quae cupiditate nulla voluptatem earum doloribus quia iste, eum dignissimos totam similique ea unde asperiores! Vero unde rem laboriosam repellat sunt. Vel.</p>
</div>
</li>
<li>
<input id="tab-2" name="tabs" type="radio" /> <label for="tab-2">Second</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, quae quas nemo veniam ullam magnam dolorum vero! Quod animi a, quidem nostrum, explicabo laboriosam distinctio ea sint recusandae, et voluptatibus.</p>
</div>
</li>
<li>
<input id="tab-3" name="tabs" type="radio" /> <label for="tab-3">Third</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa laborum dolore officiis assumenda nihil quas nam, molestiae est corrupti! Tenetur, recusandae enim hic itaque cupiditate nisi quidem inventore voluptatum neque.</p>
</div>
</li>
<li>
<input id="tab-4" name="tabs" type="radio" /> <label for="tab-4">Fourth</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa laborum dolore officiis assumenda nihil quas nam, molestiae est corrupti! Tenetur, recusandae enim hic itaque cupiditate nisi quidem inventore voluptatum neque.</p>
</div>
</li>
</ul>
<section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum fuga porro placeat enim cumque nobis, eum atque suscipit optio quibusdam dolores recusandae! Ab fugiat deserunt explicabo expedita delectus labore illum.
Harum facilis, dolore! Sed eligendi accusamus harum, earum error a praesentium! Esse laboriosam incidunt, suscipit possimus magnam nostrum voluptatem minima deserunt nisi, sint iste tenetur corporis itaque aspernatur neque explicabo.
Nobis nihil dolores optio! Aperiam laudantium ipsam alias enim, omnis voluptatem laboriosam, repudiandae magni, quas, quos in repellendus delectus! Vel consequatur tempora aperiam earum temporibus nemo cupiditate laudantium laboriosam, eos.</section>
我把你的结尾部分变成了一个部分，并在上面添加了以下样式
section{position:relative;
margin-top:80px;
margin-left:20px;
margin-right:20px;}
当您在 jsfiddle 中加宽屏幕时它不会滚动 http://jsfiddle.net/RachGal/vm4d3a1q/38/
在我的第一个选项卡上，您会看到文本是否很长，它会 运行 到它下面的段落中。我该如何防止这种情况？我不希望第一个选项卡中的文本 运行 进入其下方的文本。
我想将该段落移到标签区域下方。我可以在 .nav-tabs:after 中编辑高度，但是有更简单的方法吗？
我不想让它滚动。
Jsfiddle： http://jsfiddle.net/huskydawgs/vm4d3a1q/32/
.nav-tabs {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
text-align: center;
}
.nav-tabs:after {
content: "";
clear: both;
display: block;
height: 242px;
}
.nav-tabs li {
display: inline-block;
}
.nav-tabs li > input {
display: none;
}
.nav-tabs li > label {
display: inline-block;
border: none;
border-right-width: 0;
border-bottom-width: 0;
height: 30px;
line-height: 30px;
padding: 5px 20px;
cursor: pointer;
border-radius: 3px 3px 0 0;
}
.nav-tabs li:last-child > label {
border-right-width: 1px;
}
.nav-tabs .nav-tab-content {
display: none;
position: absolute;
left: 0;
padding: 20px;
border-top: 1px solid #e2e3e4;
height: 200px;
text-align: left;
}
/* Functional */
.nav-tabs li > input:checked + label {
background-color: #2251a4;
color: #fff;
}
.nav-tabs li > input:checked ~ .nav-tab-content {
display: block;
}
<ul class="nav-tabs">
<li>
<input checked="checked" id="tab-1" name="tabs" type="radio" />
<label for="tab-1">First</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum fuga porro placeat enim cumque nobis, eum atque suscipit optio quibusdam dolores recusandae! Ab fugiat deserunt explicabo expedita delectus labore illum.</p>
<p>Harum facilis, dolore! Sed eligendi accusamus harum, earum error a praesentium! Esse laboriosam incidunt, suscipit possimus magnam nostrum voluptatem minima deserunt nisi, sint iste tenetur corporis itaque aspernatur neque explicabo.</p>
<p>Nobis nihil dolores optio! Aperiam laudantium ipsam alias enim, omnis voluptatem laboriosam, repudiandae magni, quas, quos in repellendus delectus! Vel consequatur tempora aperiam earum temporibus nemo cupiditate laudantium laboriosam, eos.</p>
<p>Quis eveniet delectus, earum rerum asperiores ducimus quos eaque ex tenetur corporis ullam hic quasi magni laborum necessitatibus impedit voluptates! Deleniti fuga aliquam ex. Reiciendis necessitatibus, obcaecati et labore aliquid.</p>
<p>Fuga odit at nostrum molestias, inventore deserunt tempore quae cupiditate nulla voluptatem earum doloribus quia iste, eum dignissimos totam similique ea unde asperiores! Vero unde rem laboriosam repellat sunt. Vel.</p>
</div>
</li>
<li>
<input id="tab-2" name="tabs" type="radio" />
<label for="tab-2">Second</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, quae quas nemo veniam ullam magnam dolorum vero! Quod animi a, quidem nostrum, explicabo laboriosam distinctio ea sint recusandae, et voluptatibus.</p>
</div>
</li>
<li>
<input id="tab-3" name="tabs" type="radio" />
<label for="tab-3">Third</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa laborum dolore officiis assumenda nihil quas nam, molestiae est corrupti! Tenetur, recusandae enim hic itaque cupiditate nisi quidem inventore voluptatum neque.</p>
</div>
</li>
<li>
<input id="tab-4" name="tabs" type="radio" />
<label for="tab-4">Fourth</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa laborum dolore officiis assumenda nihil quas nam, molestiae est corrupti! Tenetur, recusandae enim hic itaque cupiditate nisi quidem inventore voluptatum neque.</p>
</div>
</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum fuga porro placeat enim cumque nobis, eum atque suscipit optio quibusdam dolores recusandae! Ab fugiat deserunt explicabo expedita delectus labore illum. Harum facilis, dolore! Sed eligendi
accusamus harum, earum error a praesentium! Esse laboriosam incidunt, suscipit possimus magnam nostrum voluptatem minima deserunt nisi, sint iste tenetur corporis itaque aspernatur neque explicabo. Nobis nihil dolores optio! Aperiam laudantium ipsam
alias enim, omnis voluptatem laboriosam, repudiandae magni, quas, quos in repellendus delectus! Vel consequatur tempora aperiam earum temporibus nemo cupiditate laudantium laboriosam, eos.</p>
.nav-tabs{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
text-align: center;
}
.nav-tabs:after{
content: "";
clear: both;
display: block;
height: 242px;
}
.nav-tabs li{
display: inline-block;
}
.nav-tabs li > input{
display: none;
}
.nav-tabs li > label{
display: inline-block;
border: none;
border-right-width: 0;
border-bottom-width: 0;
height: 30px;
line-height: 30px;
padding: 5px 20px;
cursor: pointer;
border-radius: 3px 3px 0 0;
}
.nav-tabs li:last-child > label{
border-right-width: 1px;
}
.nav-tabs .nav-tab-content{
display: none;
position: absolute;
left: 0;
padding: 20px;
border-top: 1px solid #e2e3e4;
height: 200px;
text-align: left;
}
/* Functional */
.nav-tabs li > input:checked + label{
background-color: #2251a4;
color: #fff;
}
.nav-tabs li > input:checked ~ .nav-tab-content{
display: block;
}
section{position:relative;
margin-top:80px;
margin-left:20px;
margin-right:20px;}
<ul class="nav-tabs">
<li>
<input checked="checked" id="tab-1" name="tabs" type="radio" /> <label for="tab-1">First</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum fuga porro placeat enim cumque nobis, eum atque suscipit optio quibusdam dolores recusandae! Ab fugiat deserunt explicabo expedita delectus labore illum.</p>
<p>Harum facilis, dolore! Sed eligendi accusamus harum, earum error a praesentium! Esse laboriosam incidunt, suscipit possimus magnam nostrum voluptatem minima deserunt nisi, sint iste tenetur corporis itaque aspernatur neque explicabo.</p>
<p>Nobis nihil dolores optio! Aperiam laudantium ipsam alias enim, omnis voluptatem laboriosam, repudiandae magni, quas, quos in repellendus delectus! Vel consequatur tempora aperiam earum temporibus nemo cupiditate laudantium laboriosam, eos.</p>
<p>Quis eveniet delectus, earum rerum asperiores ducimus quos eaque ex tenetur corporis ullam hic quasi magni laborum necessitatibus impedit voluptates! Deleniti fuga aliquam ex. Reiciendis necessitatibus, obcaecati et labore aliquid.</p>
<p>Fuga odit at nostrum molestias, inventore deserunt tempore quae cupiditate nulla voluptatem earum doloribus quia iste, eum dignissimos totam similique ea unde asperiores! Vero unde rem laboriosam repellat sunt. Vel.</p>
</div>
</li>
<li>
<input id="tab-2" name="tabs" type="radio" /> <label for="tab-2">Second</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, quae quas nemo veniam ullam magnam dolorum vero! Quod animi a, quidem nostrum, explicabo laboriosam distinctio ea sint recusandae, et voluptatibus.</p>
</div>
</li>
<li>
<input id="tab-3" name="tabs" type="radio" /> <label for="tab-3">Third</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa laborum dolore officiis assumenda nihil quas nam, molestiae est corrupti! Tenetur, recusandae enim hic itaque cupiditate nisi quidem inventore voluptatum neque.</p>
</div>
</li>
<li>
<input id="tab-4" name="tabs" type="radio" /> <label for="tab-4">Fourth</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa laborum dolore officiis assumenda nihil quas nam, molestiae est corrupti! Tenetur, recusandae enim hic itaque cupiditate nisi quidem inventore voluptatum neque.</p>
</div>
</li>
</ul>
<section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum fuga porro placeat enim cumque nobis, eum atque suscipit optio quibusdam dolores recusandae! Ab fugiat deserunt explicabo expedita delectus labore illum.
Harum facilis, dolore! Sed eligendi accusamus harum, earum error a praesentium! Esse laboriosam incidunt, suscipit possimus magnam nostrum voluptatem minima deserunt nisi, sint iste tenetur corporis itaque aspernatur neque explicabo.
Nobis nihil dolores optio! Aperiam laudantium ipsam alias enim, omnis voluptatem laboriosam, repudiandae magni, quas, quos in repellendus delectus! Vel consequatur tempora aperiam earum temporibus nemo cupiditate laudantium laboriosam, eos.</section>
我把你的结尾部分变成了一个部分，并在上面添加了以下样式
section{position:relative;
margin-top:80px;
margin-left:20px;
margin-right:20px;}
当您在 jsfiddle 中加宽屏幕时它不会滚动 http://jsfiddle.net/RachGal/vm4d3a1q/38/