标题 <h2> 浮动到下一个 UL 列表下方答案

【问题标题】：Header <h2> floating to be below the next UL list标题 <h2> 浮动到下一个 UL 列表下方
【发布时间】：2010-10-16 15:06:39
【问题描述】：

我有多个无序列表，每个列表都有一个 h2 标题。

这里是html

<h2>Early Childhood Education</h2>
<ul class="course-list">    
    <li><a href="/academics/courses/child_growth_and_development/" title="Child Growth and Development">Child Growth and Development</a></li>
    <li><a href="/academics/courses/curriculum_and_methods_in_teaching_early_childhood_education/" title="Curriculum and Methods in Teaching Early Childhood Education">Curriculum and Methods in Teaching Early Childhood Education</a></li>
    <li><a href="/academics/courses/introduction_to_early_childhood_education/" title="Introduction to Early Childhood Education">Introduction to Early Childhood Education</a></li>
    <li><a href="/academics/courses/introduction_to_education/" title="Introduction to Education">Introduction to Education</a></li>
    <li><a href="/academics/courses/practicum_i_early_childhood/" title="Practicum I: Early Childhood">Practicum I: Early Childhood</a></li>
    <li><a href="/academics/courses/practicum_ii_early_childhood/" title="Practicum II: Early Childhood">Practicum II: Early Childhood</a></li>
    <li><a href="/academics/courses/practicum_in_education/" title="Practicum in Education">Practicum in Education</a></li>
</ul>

<h2>Emergency Medical Technician</h2>
<ul class="course-list">    
    <li><a href="/academics/courses/emergency_medical_technician_emt_basic/" title="Emergency Medical Technician (EMT) – Basic">Emergency Medical Technician (EMT) – Basic</a></li>
    <li><a href="/academics/courses/emergency_medical_technician_emt_paramedic_i/" title="Emergency Medical Technician (EMT) – Paramedic I">Emergency Medical Technician (EMT) – Paramedic I</a></li>
    <li><a href="/academics/courses/emergency_medical_technician_emt_paramedic_ii_field_internship_part_i/" title="Emergency Medical Technician (EMT) – Paramedic II (Field Internship – Part I)">Emergency Medical Technician (EMT) – Paramedic II (Field Internship – Part I)</a></li>
    <li><a href="/academics/courses/emergency_medical_technician_emt_paramedic_iii/" title="Emergency Medical Technician (EMT) – Paramedic III">Emergency Medical Technician (EMT) – Paramedic III</a></li>
    <li><a href="/academics/courses/emergency_medical_technician_emt_paramedic_iv_field_internship_part_ii/" title="Emergency Medical Technician (EMT) – Paramedic IV (Field Internship – Part II)">Emergency Medical Technician (EMT) – Paramedic IV (Field Internship – Part II)</a></li>
    <li><a href="/academics/courses/emt_basic_fieldwork/" title="EMT-Basic Fieldwork">EMT-Basic Fieldwork</a></li>
    <li><a href="/academics/courses/report_writing_for_healthcare_professionals/" title="Report Writing for Healthcare Professionals">Report Writing for Healthcare Professionals</a></li>
</ul>

<h2>English</h2>
<ul class="course-list">
    <li><a href="/academics/courses/african_american_literature/" title="African American Literature">African American Literature</a></li>
    <li><a href="/academics/courses/basic_acting_technique/" title="Basic Acting Technique">Basic Acting Technique</a></li>
    <li><a href="/academics/courses/contemporary_american_poetry/" title="Contemporary American Poetry">Contemporary American Poetry</a></li>
    <li><a href="/academics/courses/english_i_college_writing/" title="English I: College Writing">English I: College Writing</a></li>
    <li><a href="/academics/courses/english_ii_introduction_to_literature/" title="English II: Introduction to Literature">English II: Introduction to Literature</a></li>
    <li><a href="/academics/courses/essentials_of_english/" title="Essentials of English">Essentials of English</a> *</li>
    <li><a href="/academics/courses/interpersonal_communication/" title="Interpersonal Communication">Interpersonal Communication</a></li>
    <li><a href="/academics/courses/interviewing_practices_and_principles/" title="Interviewing Practices and Principles">Interviewing Practices and Principles</a></li>
    <li><a href="/academics/courses/introduction_to_drama_study/" title="Introduction to Drama Study">Introduction to Drama Study</a></li>
    <li><a href="/academics/courses/introduction_to_poetry/" title="Introduction to Poetry">Introduction to Poetry</a></li>
    <li><a href="/academics/courses/introduction_to_technical_writing/" title="Introduction to Technical Writing">Introduction to Technical Writing</a></li>
    <li><a href="/academics/courses/journalism/" title="Journalism">Journalism</a></li>
    <li><a href="/academics/courses/journalism_ii/" title="Journalism II">Journalism II</a></li>
    <li><a href="/academics/courses/literature_for_children/" title="Literature for Children">Literature for Children</a></li>
    <li><a href="/academics/courses/literature_of_the_western_world/" title="Literature of the Western World">Literature of the Western World</a></li>
    <li><a href="/academics/courses/major_american_writers/" title="Major American Writers">Major American Writers</a></li>
    <li><a href="/academics/courses/major_english_writers/" title="Major English Writers">Major English Writers</a></li>
    <li><a href="/academics/courses/modern_american_novel/" title="Modern American Novel">Modern American Novel</a></li>
    <li><a href="/academics/courses/nonfiction_literature/" title="Nonfiction Literature">Nonfiction Literature</a></li>
    <li><a href="/academics/courses/public_speaking/" title="Public Speaking">Public Speaking</a></li>
    <li><a href="/academics/courses/science_fiction/" title="Science Fiction">Science Fiction</a></li>
    <li><a href="/academics/courses/service_learning_volunteer_project/" title="Service Learning – Volunteer Project">Service Learning – Volunteer Project</a></li>
    <li><a href="/academics/courses/shakespeare/" title="Shakespeare">Shakespeare</a></li>
    <li><a href="/academics/courses/storytelling/" title="Storytelling">Storytelling</a></li>
    <li><a href="/academics/courses/the_short_story/" title="The Short Story">The Short Story</a></li>
    <li><a href="/academics/courses/voice_and_diction/" title="Voice and Diction">Voice and Diction</a></li>
    <li><a href="/academics/courses/western_mythology/" title="Western Mythology">Western Mythology</a></li>
    <li><a href="/academics/courses/women_in_literature/" title="Women in Literature">Women in Literature</a></li>
    <li><a href="/academics/courses/writing_workshop_i/" title="Writing Workshop I">Writing Workshop I</a></li>
</ul>

这里是 CSS

.col-middle .course-list li {
    width:50%;
    float:left;
}

这是它的屏幕截图：http://i40.tinypic.com/2141nd3.png

您在屏幕截图中看到的问题是，如果 h2 标记中的文本在其上方的列表之后有一些空格，则会向上浮动一行。

我通过设置 overflow:auto; 解决了这个问题在 ul 样式中，但这使得列表光盘的左半部分消失（如您在此处看到的：http://i39.tinypic.com/2i8y62r.png）

另外，我想在 ul 列表底部和 h2 标题之间创建一些间距。

【问题讨论】：

标签： html css

【解决方案1】：

您可以将每个 h2/ul 对包装在一个 div 中。这甚至对语义也有好处，因为两者是相关的，因此可以说是逻辑划分的一部分。然后你可以浮动整个 div 并保持元素分组。

【讨论】：

【解决方案2】：

请尝试使用tutorial 获取多列列表

顺便说一句，花车是邪恶的。 ;)

【讨论】：

【解决方案3】：

h2 标签是否应该在每个无序列表之上？也许您应该做的是在 h2 定义中添加一个 clear:both...

h2 { clear: both; }

【讨论】：

认为最好设置 clear:both;到所有标题？例如：h1、h2、h3、h4 等... { clear:both; }