html - header <h2> float 到下一个 UL 列表下方

Question

我有多个无序列表，每个列表都有一个 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 标签内的文本会向上 float 一行。

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

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

Answer 1

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