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标记内的文本会浮动一行。

我通过设置overflow：auto来修复它;在ul风格中，但是这使得列表光盘的左半部分消失了（如你所见：http://i39.tinypic.com/2i8y62r.png）

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

Answer 1

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

Answer 2

请尝试使用tutorial多列列表

顺便说一下，花车是邪恶的。 ;）

Answer 3

h2标签是否应该在每个无序列表之上？也许你应该做的是添加一个明确的：两者都是h2定义......

h2 { clear: both; }

标题<h2>浮动到下一个UL列表</h2>之下

3 个答案: