2
Я пытался узнать css около 2 месяцев, и я наткнулся на то, что не смог разместить эти 2 div в одной строке. Мой логотип находится на панели заголовка, но моя кнопка входа в систему не будет продолжаться?Размещение 2 Divs бок о бок и сжатие кода css
Также, если вы, парень, можете сказать мне, как сократить мой код css, чтобы сделать то же самое, что было бы также фантастическим!
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
*{
margin: 0px;
padding: 0px;
}
.headerMenu {
background-color: #00B9ED;
height: 60px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
}
#logo {
\t margin-left: 15%;
}
#logo a {
padding-top: 3px;
height: 38px;
font-size: 35px;
font-family: 'Oswald', sans-serif;
text-decoration: none;
color: #FFFFFF;
}
#nav {
width: 100px;
height: 40px;
background-color: #00B9ED;
moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #e5e5e5;
padding: 5px;
font-family: 'Oswald', sans-serif;
color: white;
text-align: center;
margin-left: 60%;
}
#nav p {
\t margin-top: 8%;
}
#nav a {
\t color: white;
}
#nav a:link {text-decoration:none}
#nav a:visited { text-decoration:none}
#nav a:hover {text-decoration:none; opacity: 0.6;}<!DOCTYPE html>
<html>
<head>
\t <title>Daily Quotes</title>
\t <link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
<div class="headerMenu">
<div id="logo">
<h2><a href="#">Daily Quotes</a></h2>
</div>
\t \t \t <div id="nav">
\t \t \t <p><a href="#">login</a></p>
\t \t \t </div>
</div>
</body>
</html>
Несколько советов (потому что вы спросили): 1. Вы не должны держать указывая тот же шрифт для каждого элемента; просто укажите его на родителя. 2. 'auto' не является допустимым свойством для' padding'. 3. Кроме того, вам, вероятно, не нужно использовать так много префиксов поставщиков, «box-shadow» и «border-radius» теперь очень хорошо поддерживаются. 4. Вам не нужно устанавливать 'width: 100%' на относительно позиционированные элементы уровня блока. –
Хорошо, что вы сказали, укажите его на родителя? Родитель из двух разделов будет правильным .headermenu? –
Это правильно. Я настоятельно рекомендую прочитать информацию об элементах блочного уровня: http://www.impressivewebs.com/difference-block-inline-css/. В основном это звучит так, будто вы ожидаете, что два divs просто сядут рядом друг с другом, и это не так, как работают элементы уровня блока. Вам нужно будет их плавать, позиционировать или использовать 'display: inline-block' –