Question

我试图强迫“＃34;区＆＃34;坐在地区学校＆＃34;下面，但它往往强迫＆＃34;区＆＃34;在徽标下面的页面左侧

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;
}

有关如何强制下方区域的任何建议？我希望将其保留为文本，而不是将文本合并为.svg

Answer 1

这是你想要达到的目标吗？

更改了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;
}

这里的工作示例：

JSFiddle

在标题内强制将两个元素放在一起

1 个答案: