Горизонтальное и вертикальное выравнивание элементов

Выравнивание элементов по горизонтали и вертикали можно сделать различными способами. Выбор способа зависит от типа элемента (блочный или строчный), от типа его позиционирования, размеров и т.д.

1. Горизонтальное выравнивание по центру блока/страницы

1.1. Если для блока задана ширина:

div {
  width: 300px;
  margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/
}

Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block;

1.2. Если блок вложен в другой блок и для него не задана/задана ширина:

<div class="wrapper">
<div class="box"></div>
</div>
.wrapper {text-align: center;}

1.3. Если для блока задана ширина и его нужно зафиксировать по центру родительского блока:

<div class="wrapper">
<div class="box"></div>
</div>
.wrapper {position: relative; /*задаем для родительского блока относительное позиционирование, чтобы потом абсолютно позиционировать блок внутри него*/}
.box {
width: 400px;
position: absolute; 
left: 50%;
margin-left: -200px; /*смещаем блок влево на расстояние, равное половине его ширины*/
}

1.4. Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки:

<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.wrapper {text-align: center; /*располагаем содержимое блока по центру*/}
.box {
display: inline-block; /*располагаем блоки в ряд по горизонтали*/
margin-right: -0.25em; /*убираем правый отступ между блоками*/
}

2. Вертикальное выравнивание

2.1. Если текст занимает одну строчку, например, для кнопок и пунктов меню:

.button {
  height: 50px;
  line-height: 50px;
}

2.2. Для выравнивания блока по вертикали внутри родительского блока:

<div class="wrapper">
<div class="box"></div>
</div>
.wrapper {position: relative;}
.box {
  height: 100px;
  position: absolute;
  top: 50%;
  margin: -50px 0 0 0;
}

2.3. Вертикальное выравнивание по типу таблицы:

<div class="wrapper">
<div class="box"></div>
</div>
.wrapper {
  display: table;
  width: 100%;
}
.box {
  display: table-cell;
  height: 100px;
  text-align: center;
  vertical-align: middle;
}

2.4. Если для блока задана ширина и высота, и его нужно выровнять по центру родительского блока:

<div class="wrapper">
<div class="box"></div>
</div>
.wrapper {
  position: relative;
}
.box {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  overflow: auto; /*чтобы контент не расползался*/
}

2.5. Абсолютное позиционирование по центру страницы/блока с помощью CSS3-трансформации:

если для элемента заданы размеры

<div></div>
div {
  width: 300px; /*задаем ширину блока*/
  height:100px; /*задаем высоту блока*/
  transform: translate(-50%, -50%);
  position: absolute; 
  top: 50%; 
  left: 50%;
}

если для элемента не заданы размеры и он не пустой

<div>
  <h1>Some text here</h1>
</div>
h1 {
  margin: 0;
  transform: translate(-50%, -50%);
  position: absolute; 
  top: 50%; 
  left: 50%;
}

2.5. Абсолютное позиционирование блока

по центру страницы

<body>
<div class="box"></div>
</body>
div {
  width: 500px;
  height: 100px; /* если высота не будет задана явна, она будет равна 100% */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

по центру блока

<div class="wrapper">
<div class="box"></div>
</div>
.wrapper {
  position: absolute;
}
.box {
  width: 100px;
  height: 100px; /* если высота не будет задана явна, она будет равна 100% */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

Поделиться:

Псевдоэлемент ::selection

Псевдоэлемент ::selection отвечает за выделение текста на странице с помощью зажатой левой кнопки мыши или другого способа. Он задается сам по себе, без привязки к какому-либо html-элементу.
Используя данный псевдоэлемент, можно изменить следующие CSS-свойства выделяемого текста: color, background-color и text-shadow.
Firefox поддерживает альтернативный псевдоэлемент ::-moz-selection.

Пример:

::-moz-selection { 
    color: chocolate;
    background-color: silver;
}
::selection {
    color: chocolate;
    background-color: silver;
}

Поделиться:

Красивое оформление таблиц

Стили браузера по умолчанию отображают таблицу и ее ячейки без видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу. С помощью CSS-стилей можно красиво оформить таблицу в соответствии с ее содержимым.

Перейти на страницу с примерами

1. Таблица с раздельными строками

Таблицы с промежутками между строк помогают сконцентрироваться на связанной информации, расположенной в этой же строке таблицы, но в соседних ячейках. Для того, чтобы отделить текст от картинки, помещаем его в другую ячейку, объединив при этом две ячейки в заголовке таблицы (<th colspan="2">Модель</th>), а правую границу между ячейками убираем.

table-css-1

Разметка HTML
<table>
<tr>
  <th colspan="2">Модель</th>
  <th>Цена</th>
  <th>Количество</th>
  <th>Итого</th>
</tr>
<tr>
  <td><img src="https://html5book.ru/wp-content/uploads/2015/04/dress-2.png"></td>
  <td>Платье с цветочным принтом</td>
  <td>2500</td>
  <td>1</td>
  <td>2500</td>
</tr>
<tr>
  <td><img src="https://html5book.ru/wp-content/uploads/2015/04/dress-3.png"></td>
  <td>Платье с боковыми вставками</td>
  <td>3000</td>
  <td>1</td>
  <td>3000</td>
</tr>
</table>
Стили CSS
table {
border-spacing: 0 10px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
th {
padding: 10px 20px;
background: #56433D;
color: #F9C941;
border-right: 2px solid; 
font-size: 0.9em;
}
th:first-child {
text-align: left;
}
th:last-child {
border-right: none;
}
td {
vertical-align: middle;
padding: 10px;
font-size: 14px;
text-align: center;
border-top: 2px solid #56433D;
border-bottom: 2px solid #56433D;
border-right: 2px solid #56433D;
}
td:first-child {
border-left: 2px solid #56433D;
border-right: none;
}
td:nth-child(2){
text-align: left;
}

2. Цветная таблица

Используя такой прием, можно эффектно оформить таблицу при помощи контрастных цветов, которые гармонично впишутся в цветовую гамму вашего сайта.

table-css-2

Разметка HTML
<table>
<tr>
  <th>Company</th>
  <th>Q1</th>
  <th>Q2</th>
  <th>Q3</th>
  <th>Q4</th>
  </tr>
 <tr>
  <td>Microsoft</td>
  <td>20.3</td>
  <td>30.5</td>
  <td>23.5</td>
  <td>40.3</td>
 </tr>
<tr>
  <td>Google</td>
  <td>50.2</td>
  <td>40.63</td>
  <td>45.23</td>
  <td>39.3</td>
</tr>
<tr>
  <td>Apple</td>
  <td>25.4</td>
  <td>30.2</td>
  <td>33.3</td>
  <td>36.7</td>
</tr>
<tr>
  <td>IBM</td>
  <td>20.4</td>
  <td>15.6</td>
  <td>22.3</td>
  <td>29.3</td>
</tr>
</table>
Стили CSS
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-collapse: collapse;
text-align: center;
}
th, td:first-child {
background: #AFCDE7;
color: white;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
td {
background: #D8E6F3;
}
th:first-child, td:first-child {
text-align: left;
}

3. Таблица с закругленными углами

Благодаря добавлению в спецификацию CSS3 свойства border-radius, появилась возможность закругления углов таблицы без использования фоновых изображений. Чтобы добиться такого эффекта, нужно закруглить углы соответствующих ячеек.

table-css-3

Разметка HTML

аналогично с примером 2.

Стили CSS
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-radius: 10px;
border-spacing: 0;
text-align: center;
}
th {
background: #BCEBDD;
color: white;
text-shadow: 0 1px 1px #2D2020;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
th:first-child, td:first-child {
text-align: left;
}
th:first-child {
border-top-left-radius: 10px;
}
th:last-child {
border-top-right-radius: 10px;
border-right: none;
}
td {
padding: 10px 20px;
background: #F8E391;
}
tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}
tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}
tr td:last-child {
border-right: none;
}

4. Таблица с раздельными ячейками

table-css-4

Разметка HTML

аналогично с примером 2.

Стили CSS
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: left;
border-collapse: separate;
border-spacing: 5px;
background: #ECE9E0;
color: #656665;
border: 16px solid #ECE9E0;
border-radius: 20px;
}
th {
font-size: 18px;
padding: 10px;
}
td {
background: #F5D7BF;
padding: 10px;
}

5. Таблица-календарь

table-css-5

Разметка HTML
<table>
<tr><th colspan="5">My working weeks, March 2015</th></tr>
 <tr>
  <td>Monday</td>
  <td>Tuesday</td>
  <td>Wednesday</td>
  <td>Thursday</td>
  <td>Friday</td>
 </tr>
<tr>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
<tr>
  <td>9</td>
  <td>10</td>
  <td>11</td>
  <td>12</td>
  <td>13</td>
</tr>
<tr>
  <td>16</td>
  <td>17</td>
  <td>18</td>
  <td>19</td>
  <td>20</td>
</tr>
  <tr>
  <td>23</td>
  <td>24</td>
  <td>25</td>
  <td>26</td>
  <td>27</td>
</tr>
  <tr>
  <td>30</td>
  <td>31</td>
  <td colspan="3"></td>
</tr>
 </table>
Стили CSS
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: center;
border-collapse: collapse;
border-spacing: 5px;
background: #E1E3E0;
border-radius: 20px;
}
th {
font-size: 22px;
font-weight: 300;
padding: 12px 10px;
border-bottom: 2px solid #F56433;
color: #F56433;
}
tbody tr:nth-child(2) {
border-bottom: 2px solid #F56433;
}
td {
padding: 10px;
color: #8D8173;
}

6. Таблица-жалюзи

table-css-6

Разметка HTML
<table>
<tr>
<th>Employee</th>
<th>Salary</th>
<th>Bonus</th>
<th>Supervisor</th>
</tr>
<tr>
<td>Stephen C. Cox</td>
<td>$300</td>
<td>$50</td>
<td>Bob</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>$150</td>
<td>-</td>
<td>Annie</td>
</tr>
<tr>
<td>Joyce Ming</td>
<td>$200</td>
<td>$35</td>
<td>Andy</td>
</tr>
<tr>
<td>James A. Pentel</td>
<td>$175</td>
<td>$25</td>
<td>Annie</td>
</tr>
</table>
Стили CSS
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
text-align: left;
border-collapse: collapse;
border-radius: 20px;
box-shadow: 0 0 0 10px #F2906B;
color: #452F21;
}
th {
padding: 10px 8px;
background: white;
}
table th:first-child {
border-top-left-radius: 20px;
}
table th:last-child {
border-top-right-radius: 20px;
}
td {
border-top: 10px solid #F2906B;
padding: 8px;
background: white;
}
table td:first-child {
border-bottom-left-radius: 20px;
}
table td:last-child {
border-bottom-right-radius: 20px;
}

7. Таблица-зебра

Вертикальная зебра в оформлении таблицы позволит сделать акцент на столбцы, а эффект при наведении на строку добавит привлекательности такой таблице.

table-css-7

Разметка HTML
<table class="zebra">
<tr>
  <th></th>
  <th>Q1</th>
  <th>Q2</th>
  <th>Q3</th>
  <th>Q4</th>
  </tr>
 <tr>
  <td class="round-top">Microsoft</td>
  <td>20.3</td>
  <td>30.5</td>
  <td>23.5</td>
  <td>40.3</td>
 </tr>
<tr>
  <td>Google</td>
  <td>50.2</td>
  <td>40.63</td>
  <td>45.23</td>
  <td>39.3</td>
</tr>
<tr>
  <td>Apple</td>
  <td>25.4</td>
  <td>30.2</td>
  <td>33.3</td>
  <td>36.7</td>
</tr>
<tr>
  <td class="round-bottom">IBM</td>
  <td>20.4</td>
  <td>15.6</td>
  <td>22.3</td>
  <td>29.3</td>
</tr>
</table>
Стили CSS
table {
border-spacing: 0;
empty-cells: hide;
}
td {
padding: 10px 20px;
text-align: center;
border-bottom: 1px solid #F4EEE8;
transition: all 0.5s linear;
}
td:first-child {
text-align: left;
color: #3D3511;
font-weight: bold;
}
th {
padding: 10px 20px;
color: #3D3511;
border-bottom: 1px solid #F4EEE8;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
td:nth-child(even) {
background: #F6D27E;
}
td:nth-child(odd) {
background: #D1C7BF;
}
th:nth-child(even)  {
background: #F6D27E;
}
th:nth-child(odd)  {
background: #D1C7BF;
}
.round-top {
border-top-left-radius: 5px;
}
.round-bottom {
border-bottom-left-radius: 5px;
}
tr:hover td{
background: #D1C7BF;
font-weight: bold;
}

8. Таблица-меню

table-css-8

Разметка HTML
<table>
  <caption>
    Холодные закуски
  </caption>
  <tr>
    <th>Наименование</th>
    <th>Выход, гр.</th>
    <th>Цена, руб.</th>
  </tr>
  <tr>
    <td>Ассорти из овощей, зелени и сыра</td><td>250</td>
    <td>190</td>
  </tr>
  <tr>
    <td>Ассорти мясное</td>
    <td>250</td>
    <td>300</td>
  </tr>
  <tr>
    <td>Ассорти рыбное (семга с/с, форель с/с)</td>
    <td>250</td>
    <td>350</td>
  </tr>
  <tr>
    <td>Ассорти грибное</td>
    <td>120</td>
    <td>150</td>
  </tr>
  <tr>
    <td>Соления из бочки (помидоры, огурцы, перец, чеснок, капуста)</td>
    <td>250</td>
    <td>180</td>
  </tr>
</table>
Стили CSS
table {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
  border-collapse: collapse;
  color: #686461;
}
caption {
  padding: 10px;
  color: white;
  background: #8FD4C1;
  font-size: 18px;
  text-align: left;
  font-weight: bold;
}
th {
  border-bottom: 3px solid #B9B29F;
  padding: 10px;
  text-align: left;
}
td {
  padding: 10px;
}
tr:nth-child(odd) {
  background: white;
}
tr:nth-child(even) {
  background: #E8E6D1;
}

9. Таблица с акцентом на первый столбец

table_col

Разметка HTML
<table class="table_col">
  <colgroup>
      <col style="background:#C7DAF0;">
  </colgroup>
  <tr>
    <th>Comedy</th>
    <th>Adventure</th>
    <th>Action</th>
    <th>Children</th>
    </tr>
  <tr>
    <td>Scary Movie</td>
    <td>Indiana Jones</td>
    <td>The Punisher</td>
    <td>Wall-E</td>
    </tr>
  <tr>
    <td>Epic Movie</td>
    <td>Star Wars</td>
    <td>Bad Boys</td>
    <td>Madagascar</td>
    </tr>
  <tr>
    <td>Spartan</td>
    <td>LOTR</td>
    <td>Die Hard</td>
    <td>Finding Nemo</td>
    </tr>
  <tr>
    <td>Dr. Dolittle</td>
    <td>The Mummy</td>
    <td>300</td>
    <td>A Bug's Life</td>
    </tr>
</table>
Стили CSS
.table_col {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
  font-size: 14px;
  width: 660px;
  background: white;
  text-align: left;
  border-collapse: collapse;
  color: #3E4347;
}
.table_col th:first-child, .table_col td:first-child {
color: #F5F6F6;
border-left: none;
}
.table_col th {
font-weight: normal;
border-bottom: 2px solid #F5E1A6;
border-right: 20px solid white;
border-left: 20px solid white;
padding: 8px 10px;
}
.table_col td {
border-right: 20px solid white;
border-left: 20px solid white;
padding: 12px 10px;
color: #8b8e91;
}

10. Таблица с эффектом размытия строк при наведении

table_blur

Разметка HTML
<table class="table_blur">
  <tr>
    <th>Company</th>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
    <th>Q4</th>
    </tr>
  <tr>
    <td>Microsoft</td>
    <td>20.3</td>
    <td>30.5</td>
    <td>23.5</td>
    <td>40.3</td>
    </tr>
  <tr>
    <td>Google</td>
    <td>50.2</td>
    <td>40.63</td>
    <td>45.23</td>
    <td>39.3</td>
    </tr>
  <tr>
    <td>Apple</td>
    <td>25.4</td>
    <td>30.2</td>
    <td>33.3</td>
    <td>36.7</td>
    </tr>
  <tr>
    <td>IBM</td>
    <td>20.4</td>
    <td>15.6</td>
    <td>22.3</td>
    <td>29.3</td>
    </tr>
</table>
Стили CSS
.table_blur {
  background: #f5ffff;
  border-collapse: collapse;
  text-align: left;
}
.table_blur th {
  border-top: 1px solid #777777;	
  border-bottom: 1px solid #777777; 
  box-shadow: inset 0 1px 0 #999999, inset 0 -1px 0 #999999;
  background: linear-gradient(#9595b6, #5a567f);
  color: white;
  padding: 10px 15px;
  position: relative;
}
.table_blur th:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 25%;
  height: 25%;
  width: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255,255,255,.08));
}
.table_blur tr:nth-child(odd) {
  background: #ebf3f9;
}
.table_blur th:first-child {
  border-left: 1px solid #777777;	
  border-bottom:  1px solid #777777;
  box-shadow: inset 1px 1px 0 #999999, inset 0 -1px 0 #999999;
}
.table_blur th:last-child {
  border-right: 1px solid #777777;
  border-bottom:  1px solid #777777;
  box-shadow: inset -1px 1px 0 #999999, inset 0 -1px 0 #999999;
}
.table_blur td {
  border: 1px solid #e3eef7;
  padding: 10px 15px;
  position: relative;
  transition: all 0.5s ease;
}
.table_blur tbody:hover td {
  color: transparent;
  text-shadow: 0 0 3px #a09f9d;
}
.table_blur tbody:hover tr:hover td {
  color: #444444;
  text-shadow: none;
}

11. Таблица-прайс

table_pricing

Разметка HTML
<table class="table_price">
<caption>Plans&Pricing</caption>
<tr>
  <th>Plan</th>
  <th colspan="2">Price</th>
</tr>
<tr>
  <td>Basic</td>
  <td>10$</td>
  <td><a>Select</a></td>
</tr>
<tr>
  <td>Professional</td>
  <td>20$</td>
  <td><a>Select</a></td>
</tr>
<tr>
  <td>Premium</td>
  <td>30$</td>
  <td><a>Select</a></td>
</tr>
<tr>
  <td>Platinum</td>
  <td>60$</td>
  <td><a>Select</a></td>
</tr>
</table>
Стили CSS
.table_price {
  border-collapse: collapse;
  border-left: 3px solid #F79361;
  border-right: 3px solid #F79361;
  border-bottom: 3px solid #F79361;
  font-family: "Lucida Grande", sans-serif;
 }
.table_price caption {
  background: #F79361; 
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px  4px 0 rgba(0,0,0,.3);
  color: white;
  font-family: "Roboto Slab",serif;
  font-style: normal;
  font-size: 26px;
  text-align: center;
  margin: 0;
}
.table_price td, .table_price th {
  padding: 10px;
}
.table_price th {
  text-align: left;
  font-size: 18px;
}
.table_price tr:nth-child(2n) {
  background: #E5E5E5;
}
.table_price td:last-of-type {
  text-align: center;
}
.table_price a {
  display: inline-block;
  padding: 5px 10px;
  background: #F79361;
  box-shadow: 2px 2px 0 0 #a22800;
  position: relative;
}
.table_price a:hover {
  box-shadow: none;
  top: 2px;
  left: 2px;
}

12. Таблица с темным фоном и с подчеркиванием текста при наведении

table_dark

Разметка HTML
<table class="table_dark">
  <tr>
    <th>Company</th>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
    <th>Q4</th>
    </tr>
  <tr>
    <td>Microsoft</td>
    <td>20.3</td>
    <td>30.5</td>
    <td>23.5</td>
    <td>40.3</td>
    </tr>
  <tr>
    <td>Google</td>
    <td>50.2</td>
    <td>40.63</td>
    <td>45.23</td>
    <td>39.3</td>
    </tr>
  <tr>
    <td>Apple</td>
    <td>25.4</td>
    <td>30.2</td>
    <td>33.3</td>
    <td>36.7</td>
    </tr>
  <tr>
    <td>IBM</td>
    <td>20.4</td>
    <td>15.6</td>
    <td>22.3</td>
    <td>29.3</td>
    </tr>
  </table>
Стили CSS
.table_dark {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
  font-size: 14px;
  width: 640px;
  text-align: left;
  border-collapse: collapse;
  background: #252F48;
  margin: 10px;
}
.table_dark th {
  color: #EDB749;
  border-bottom: 1px solid #37B5A5;
  padding: 12px 17px;
}
.table_dark td {
  color: #CAD4D6;
  border-bottom: 1px solid #37B5A5;
  border-right:1px solid #37B5A5;
  padding: 7px 17px;
}
.table_dark tr:last-child td {
  border-bottom: none;
}
.table_dark td:last-child {
  border-right: none;
}
.table_dark tr:hover td {
  text-decoration: underline;
}

Поделиться:

Горизонтальное меню для сайта

Горизонтальное меню представляет собой список разделов сайта, поэтому логичнее разметить внутри элемента <ul>, а затем применить CSS-стили к его элементам. Такое расположение меню является наиболее распространенным в силу очевидных преимуществ в его позиционировании на веб-странице.

Перейти на страницу с примерами

Как сделать горизонтальное меню: разметка и примеры оформления

HTML-разметка и базовые стили для горизонтального меню

По умолчанию все элементы списка <li>...</li> располагаются вертикально, занимая по ширине всю ширину элемента контейнера <ul>...</ul>, который в свою очередь занимает всю ширину его блока-контейнера.

HTML разметка для горизонтальной навигации

<ul>
<li><a href="">Пункт меню</a></li>
<li><a href="">Пункт меню</a></li>
<li><a href="">Пункт меню</a></li>
...
</ul>

Горизонтальное меню, находящееся внутри тега <ul>...</ul>, можно дополнительно помещать внутрь элемента <nav>...</nav> и/или <header>...</header>. Благодаря этому html-разметке придается семантический смысл, а также появляется дополнительная возможность для форматирования блока меню.

Существует несколько способов разместить их горизонтально. Для начала нужно сбросить стили браузера по умолчанию для элементов навигации:

ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/
  padding-left: 0; /*убираем левый отступ, равный 40px*/
}
a {text-decoration: none; /*убираем подчеркивание текста ссылок*/}

See the Pen GJxayB by Elena Nazarova (@nazarelen) on CodePen.

Способ 1. li {display: inline;}

Делаем элементы списка строчными. В результате они располагаются по горизонтали, с правой стороны между ними добавляется промежуток, равный 0.4em (вычисляется относительно размера шрифта). Чтобы убрать его, добавляем для li отрицательное правое поле li {margin-right: -4px;}. Дальше стилизуем ссылки по своему желанию.

Способ 2. li {float: left;}

Делаем элементы списка плавающими. В результате они располагаются по горизонтали. Высота блока-контейнера ul становится равной нулю. Чтобы решить эту проблему, добавляем для ul {overflow: hidden;}, расширяя его и позволяя ему таким образом содержать плавающие элементы. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.

Способ 3. li {display: inline-block;}

Делаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.

Способ 4. ul {display: flex;}

Делаем список ul гибким контейнером с помощью модели CSS3 flexbox. В результате элементы списка располагаются горизонтально. Добавляем для ссылок a {display: block;} и стилизуем их по своему желанию.

1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку

<ul class="menu-main">
  <li><a href="" class="current">Work</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Blog</a></li>
  <li><a href="">Contact</a></li>
</ul>
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed');
.menu-main {
  list-style: none;
  margin: 40px 0 5px;
  padding: 25px 0 5px;
  text-align: center;
  background: white;
}
.menu-main li {display: inline-block;}
.menu-main li:after {
  content: "|";
  color: #606060;
  display: inline-block;
  vertical-align:top;
}
.menu-main li:last-child:after {content: none;}
.menu-main a {
  text-decoration: none;
  font-family: 'Ubuntu Condensed', sans-serif;
  letter-spacing: 2px;
  position: relative;
  padding-bottom: 20px;
  margin: 0 34px 0 30px;
  font-size: 17px;
  text-transform: uppercase;
  display: inline-block;
  transition: color .2s;
}
.menu-main a, .menu-main a:visited {color: #9d999d;}
.menu-main a.current, .menu-main a:hover{color: #feb386;}
.menu-main a:before,
.menu-main a:after {
  content: "";
  position: absolute;
  height: 4px;
  top: auto;
  right: 50%;
  bottom: -5px;
  left: 50%;
  background: #feb386;
  transition: .8s;
}
.menu-main a:hover:before, .menu-main .current:before {left: 0;}
.menu-main a:hover:after, .menu-main .current:after {right: 0;}   
@media (max-width: 550px) {
.menu-main {padding-top: 0;}
.menu-main li {display: block;}
.menu-main li:after {content: none;}
.menu-main a {
  padding: 25px 0 20px; 
  margin: 0 30px;
}
}

2. Адаптивное меню для свадебного сайта

<nav class="top-menu">
  <ul class="menu-main">
    <li><a href="" class="current">Work</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Blog</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
.top-menu {
  position: relative; 
  background: #fff;
  box-shadow: inset 0 0 10px #ccc;
}
.top-menu:before,
.top-menu:after {
  content: "";
  display: block;
  height: 1px;
  border-top: 3px solid #575350;
  border-bottom: 1px solid #575350;
  margin-bottom: 2px;
}
.top-menu:after {
  border-bottom: 3px solid #575350;
  border-top: 1px solid #575350;
  box-shadow: 0 2px 7px #ccc;
  margin-top: 2px;
}
.menu-main {
  list-style: none;
  padding: 0 30px;
  margin: 0;
  font-size: 18px;
  text-align: center;
  position: relative;
}
.menu-main:before,
.menu-main:after {
  content: "\25C8";
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.menu-main:before {left: 15px;}
.menu-main:after {right: 15px;}
.menu-main li {
  display: inline-block;
  padding: 5px 0;
}
.menu-main a {
  text-decoration: none;
  display: inline-block;
  margin: 2px 5px;
  padding: 6px 15px;
  font-family: 'PT Sans', sans-serif;
  font-size: 16px;
  color: #777777;
  border-bottom: 1px solid transparent;
  transition: .3s linear;
}
.menu-main .current, .menu-main a:hover {
  border-radius: 3px;
  background: #f3ece1;
  color: #313131;
  text-shadow: 0 1px 0 #fff;
  border-color: #c6c6c6;
}
@media (max-width: 500px) {
  .menu-main li {display: block;}
}

3. Адаптивное меню с фестонами

<ul class="menu-main">
  <li><a href="" class="current">Work</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Blog</a></li>
  <li><a href="">Contact</a></li>
</ul>
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption');
.menu-main {
  list-style: none;
  padding: 0 30px;
  margin: 0;
  font-size: 18px;
  text-align: center;
  position: relative;
  background: white;
}
.menu-main:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 20px;
  left: 0;
  bottom: -20px;
  background: radial-gradient(white 0%, white 70%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%) 0 -10px;
  background-size: 20px 20px;
  background-repeat: repeat-x;
}
.menu-main li {display: inline-block;}
.menu-main a {
  text-decoration: none;
  display: inline-block;
  margin: 0 15px;
  padding: 10px 30px;
  font-family: 'PT Sans Caption', sans-serif;
  color: #777777;
  transition: .3s linear;
  position: relative;
}
.menu-main a:before,
.menu-main a:after {
  content: "";
  position: absolute;
  top: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F58262;
  opacity: 0;
  transition: .5s ease-in-out;
}
.menu-main a:before {left: 5px;}
.menu-main a:after {right: 5px;}
.menu-main a.current:before,
.menu-main a.current:after,
.menu-main a:hover:before, 
.menu-main a:hover:after {opacity: 1;}
.menu-main a.current,
.menu-main a:hover {color: #F58262;}
@media(max-width:680px) {
  .menu-main li {display: block;}
}

4. Адаптивное меню на ленточке

<nav class="top-menu">
  <ul class="menu-main">
    <li><a href="" class="current">Work</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Blog</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption');
.top-menu {
  margin: 0 60px;
  position: relative;
  background: #5A394E;    
  box-shadow: 
    inset 1px 0 0 rgba(255,255,255,.1), 
    inset -1px 0 0 rgba(255,255,255,.1), 
    inset 150px 0 150px -150px rgba(255,255,255,.12), 
    inset -150px 0 150px -150px rgba(255,255,255,.12);
}
.top-menu:before,
.top-menu:after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  width: 100%;
  height: 3px;
}
.top-menu:before {
  top: 0;
  border-bottom: 1px dashed rgba(255,255,255,.2);
}
.top-menu:after {
  bottom: 0;
  border-top: 1px dashed rgba(255,255,255,.2);
}
.menu-main {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.menu-main:before, 
.menu-main:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 0;
  top: 8px;
  border-top: 18px solid #5A394E;
  border-bottom: 18px solid #5A394E;
  transform: rotate(360deg);
  z-index: -1;
}
.menu-main:before {
  left: -30px;
  border-left: 12px solid rgba(255, 255, 255, 0);
}
.menu-main:after {
  right: -30px;
  border-right: 12px solid rgba(255, 255, 255, 0);
}
.menu-main li {
  display: inline-block;
  margin-right: -4px;
}
.menu-main a {
  text-decoration: none;
  display: inline-block;
  padding: 15px 30px;
  font-family: 'PT Sans Caption', sans-serif;
  color: white;
  transition: .3s linear;
}
.menu-main a.current,
.menu-main a:hover {background: rgba(0,0,0,.2);}
@media (max-width: 680px) {
.top-menu {margin: 0;}
.menu-main li {
  display: block;
  margin-right: 0;
}
.menu-main:before, 
.menu-main:after {content: none;}
.menu-main a {display: block;}
}

5. Адаптивное меню с логотипом по середине

<nav class="top-menu">
  <ul class="menu-main">
    <li class="left-item"><a href="">Work</a></li>
    <li class="left-item"><a href="">About</a></li>
    <li class="left-item"><a href="">Story</a></li>
    <li class="right-item"><a href="">Contact</a></li>
    <li class="right-item"><a href="">Shop</a></li>
    <li class="right-item"><a href="">Gallery</a></li>
</ul>
  <a class="navbar-logo" href=""><img src="https://html5book.ru/wp-content/uploads/2017/04/lily-logo.png"></a>
</nav>
@import url('https://fonts.googleapis.com/css?family=Arimo');
.top-menu {
  position: relative;
  background: rgba(34,34,34,.2);
}
.menu-main {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-main:after {
  content: "";
  display: table;
  clear: both;
}
.left-item {float: left;}
.right-item {float: right;}
.navbar-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.menu-main a {
  text-decoration: none;
  display: block;
  line-height: 80px;
  padding: 0 20px;
  font-size: 18px;
  letter-spacing: 2px;
  font-family: 'Arimo', sans-serif;
  font-weight: bold;
  color: white;
  transition: .3s linear;
}
.menu-main a:hover {background: rgba(0,0,0,.3);}
@media (max-width: 830px) {
.menu-main {
  padding-top: 90px;
  text-align: center;
}
.navbar-logo {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
}
.menu-main li {
  float: none;
  display: inline-block;
}
.menu-main a {
  line-height: normal;
  padding: 20px 15px;
  font-size: 16px;
}
}
@media (max-width: 630px) {
.menu-main li {display: block;}
}

6. Адаптивное меню с логотипом слева

<nav class="top-menu">
  <a class="navbar-logo" href=""><img src="https://html5book.ru/wp-content/uploads/2017/04/lily-logo.png"></a>
  <ul class="menu-main">
    <li><a href="">Work</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Story</a></li>
    <li><a href="">Shop</a></li>
    <li><a href="">Gallery</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>
@import url('https://fonts.googleapis.com/css?family=Arimo');
.top-menu {
  background: rgba(255,255,255,.5);
  box-shadow: 3px 0 7px rgba(0,0,0,.3);
  padding: 20px;
}
.top-menu:after {
  content: "";
  display: table;
  clear: both;
}
.navbar-logo {display: inline-block;}
.menu-main {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
}
.menu-main li {display: inline-block;}
.menu-main a {
  text-decoration: none;
  display: block;
  position: relative;
  line-height: 61px;
  padding-left: 20px;
  font-size: 18px;
  letter-spacing: 2px;
  font-family: 'Arimo', sans-serif;
  font-weight: bold;
  color: #F73E24;
  transition:.3s linear;
}
.menu-main a:before {
  content: "";
  width: 9px;
  height: 9px;
  background: #F73E24;
  position: absolute;
  left: 50%;
  transform: rotate(45deg) translateX(6.5px);
  opacity: 0;
  transition: .3s linear;
}
.menu-main a:hover:before {opacity: 1;}
@media (max-width: 660px) {
.menu-main {
  float: none;
  padding-top: 20px;
}
.top-menu {
  text-align: center;
  padding: 20px 0 0 0;
}
.menu-main a {padding: 0 10px;}
.menu-main a:before {transform: rotate(45deg) translateX(-6px);}
}
@media (max-width: 600px) {
.menu-main li {display: block;}
}

Поделиться:

Как скрыть элемент?

Изменить видимость элемента можно тремя способами:

1. С помощью display: none;. Элемент полностью исчезает с веб-страницы, не оставляя и следа.

2. Задав для элемента visibility: hidden;. Данный способ убирает элемент из вида, при этом не затрагивая поток html-документа, оставляя пустое пространство в том месте, где данный элемент должен был находиться.

3. С помощью свойства opacity. Значение opacity: 0; делает прозрачным весь элемент целиком, включая его содержимое, а не только фон элемента. Данный способ действует аналогично с visibility: hidden, отличие состоит лишь в том, что свойство opacity введено в спецификацию CSS3.

Для абсолютно позиционированных элементов visibility: hidden и display: none ведут себя одинаково.

Чтобы показать невидимый элемент, можно использовать псевдокласс :hover, например:

.submenu {
display: none;
}
.submenu:hover {
display: block;
}

CSS-свойство, отвечающее только за видимость элементов — это свойство visibility. Оно принимает следующие значения:

visibility: visible; — элемент видимый по умолчанию;

visibility: hidden; — элемент становится невидимым, находясь при этом на своем месте. В то же время элементы-потомки невидимого элемента можно сделать видимыми, например:

p {
visibility: hidden;
}
p strong {
visibility: visible;
}

visibility: collapse; — данное свойство применяется для табличных элементов, делая ячейки таблицы невидимыми. Если это свойство используется для остальных элементов, то оно работает аналогично с visibility: hidden;;

visibility: inherit; — наследует это свойство от родительского элемента.

Поделиться: