在标题内强制两个元素在彼此的顶部

I'm trying to force the word "District" to sit below "Area School", but it tends to force "District" to the left of the page underneath the logo

我正试图强迫“区”这个词坐在“区域学校”下面,但它往往会迫使“区”位于徽标下方页面的左侧

HTML:

<!DOCTYPE html>
<head>
    <meta name="description" content="EPASD is a public school district that serves the communities in and around East Pennsboro Township in Central Pennsylvania.">
    <meta name="author" content="John Gibson">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">
    <link href='http://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
    <link rel="icon" type="image/ico" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body class="nomargins">

    <header id="MainHeader">
        <nav>
        <ul>
            <li class="inline" style="max-width:auto">
                <img src="EPASD logo.svg" id="logo">
            </li>
            <li class="inline" id="DistrictName_1">
                <span>East Pennsboro</span>
            </li>
            <li class="inline" id="DistrictName_2">
                <div class="inline">Area School</div>
                <div class="inline">District</div>
            </li>
        </ul>
        </nav>
    </header>

    <aside>
        <nav style="VerticalNavbar">
            <a href="">
        </nav>
    </aside>

    <section id-"MainContentArea">
        <div id="carousel">
        </div>
    </section>

    <aside id="articles">
        <h1 class="ArticleSectionHeading">Articles</h3>
    </aside>

</body>
</html>

CSS:

* {
margin: 0px 0px 0px 0px;
}
body {
    background-image: url(background.svg);
    background-size: cover;
    background-attachment: scroll;
}

.nomargins {
margin: 0px 0px 0px 0px;
}

#MainHeader {
    background: #F08819;
    position: fixed;
    z-index: 100;
    height: 115px;
    width: 100%;
    min-width: 320px;
    color: #000000;
    opacity: 0.9;
}

#articles {
    position: relative;
    overflow: hidden;
}

#logo {
    height: 100%;
    max-height: 150px;
    margin-top: -17px;
}

ul {
list-style-type: none;
padding-left: 0px;
max-height:auto;
overflow: visible;
display: inline-block;
}

#DistrictName_1 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 3.6em;
vertical-align: 60px;
margin-left: 26px;
}

#DistrictName_2 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 1.625em;
vertical-align: 80px;
}

.inline {
display: inline;
}

.block {
display: block;
}

Any suggestions on how to force District underneath? I'd like to keep it as text rather than merging the text into an .svg

关于如何强制下面的区域的任何建议?我想将它保留为文本而不是将文本合并为.svg

1 个解决方案

#1

Is this what you wanted to achieve?

这是你想要实现的吗?

Changed HTML

<ul>
    <li style="max-width:auto">
        <img src="EPASD logo.svg" id="logo"></img>
    </li>
    <li id="DistrictName_1">
         <span>East Pennsboro</span>
     </li>
     <li id="DistrictName_2">
         <div>Area School</div>
         <div class="clear">District</div>
     </li>
</ul>

CSS

ul li, #DistrictName_2 > div {
    display:inline-block;
}
.clear {
    float:left;
    clear:both;
}

Working example here:

这里的工作示例:

JSFiddle

#1