Вынуждение двух элементов друг над другом в заголовке

Question

Вынуждение двух элементов друг над другом в заголовке

0

Я пытаюсь заставить слово "Район" сидеть ниже "Area School", но он имеет тенденцию форсировать "Район" слева от страницы под логотипом

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

jgibson02 05 апр. 2014, в 23:08

Источник

0

Привет. Можете ли вы создать скрипку на jsfiddle.net. Было бы легко отлаживать
Ankur Aggarwal 05 апр. 2014, в 20:41
0

jsfiddle.net/#&togetherjs=cRCIStwE9o Извините, что мне потребовался день, чтобы ответить
jgibson02 06 апр. 2014, в 21:16

Теги:

html

css

inline

css-position

block

1 ответ

Ещё вопросы

Привет. Можете ли вы создать скрипку на jsfiddle.net. Было бы легко отлаживать
jsfiddle.net/#&togetherjs=cRCIStwE9o Извините, что мне потребовался день, чтобы ответить

kajetons · Answer 1 · 2014-04-05T18-40-00.000Z

Это то, чего вы хотели достичь?

Изменен 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

Для меня это подтолкнуло «Район» прямо слева от «Областной школы»