Привязать объект к правой части экрана с учётом внешнего padding

Question

Привязать объект к правой части экрана с учётом внешнего padding

Рейтинг: 0Ответов: 2Опубликовано: 24.08.2023

Мне нужно прижать навигационное меню к правой части экрана, оставив лого справа.

Вот HTML :

.content-type1 {
  padding: 30px;
}

.navigation {
  text-align: right;
}

.logo {
  width: 10%;
  margin-right: 30px;
}

ul {
  list-style-type: none;
  color: white;
}

a {
  text-decoration: none;
  color: white;
}

.navigation li {
  display: inline-block;
  margin-right: 30px;
  font-size: 25px;
  font-family: 'Russo one', sans-serif;
  transition: 0.75s;
}

.navigation li:hover {
  font-size: 30px;
}

.navigation li:last-child {
  margin-right: 0px;
}

.logo,
.menu {
  display: inline-block;
  vertical-align: middle;
}

<div class="content-type1">
  <header>
    <img src="img/logo.svg" alt="DLand" class="logo">
    <nav class="menu">
      <ul class="navigation">
        <li><a href="#">Discord</a></li>
        <li><a href="#">О проекте</a></li>
        <li><a href="#">Документы</a></li>
      </ul>
    </nav>
  </header>
</div>

css html

Источник: Stack Overflow на русском

Answer 1

▲ 0

нужно прижать навигационное меню к правой части экрана, оставив лого справа

Предложу такой вариант...

body {
  background: blue;
}
.content-type1 {
  padding: 30px;
}
header {
  display: flex;
  flex-direction: row-reverse;
  gap: 30px;
}

.navigation {
  text-align: right;
}

.logo {
  width: 10%;
}

ul {
  list-style-type: none;
  color: white;
}

a {
  text-decoration: none;
  color: white;
}

.navigation li {
  display: inline-block;
  margin-right: 30px;
  font-size: 25px;
  font-family: 'Russo one', sans-serif;
  transition: 0.75s;
}

.navigation li:hover {
  font-size: 30px;
}

.navigation li:last-child {
  margin-right: 0px;
}

.logo,
.menu {
  display: inline-block;
  vertical-align: middle;
}

<div class="content-type1">
  <header>
    <img src="img/logo.svg" alt="DLand" class="logo">
    <nav class="menu">
      <ul class="navigation">
        <li><a href="#">Discord</a></li>
        <li><a href="#">О проекте</a></li>
        <li><a href="#">Документы</a></li>
      </ul>
    </nav>
  </header>
</div>

Answer 2

▲ 0

Если в Вашем вопросе нет опечаток и Вы действительно хотите прижать лого и навигационное меню к правой части, при этом сделав лого справа, то предлагаю вот такой вариант:

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>nav</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>

<body class="bg-danger">
  <div class="container-fluid">
    <div class="row">
      <div class="col-10">
        <ul class="nav justify-content-end">
          <li class="nav-item">
            <a class="nav-link link-light" href="#">Discord</a>
          </li>
          <li class="nav-item">
            <a class="nav-link link-light" href="#">О проекте</a>
          </li>
          <li class="nav-item">
            <a class="nav-link link-light" href="#">Документы</a>
          </li>
        </ul>
      </div>
      <div class="col-2">
        <svg fill="aqua" width="75px" height="75px" viewBox="0 0 300.00 300.00" xmlns="http://www.w3.org/2000/svg" transform="rotate(0)" stroke="#000000" stroke-width="0.00256"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M79.912 85.68c.783.78.947 2.176.366 3.116l-3.784 6.12a36.589 36.589 0 0 0-1.874 3.536l-3.136 6.995c-.454 1.012-.98 2.722-1.175 3.81l-1.55 8.697a30.277 30.277 0 0 0-.389 3.974l-.155 8.611c-.02 1.103.169 2.863.424 3.948l1.983 8.408c.254 1.077.846 2.754 1.327 3.755l3.084 6.417a37.89 37.89 0 0 0 1.955 3.484l2.728 4.21c.602.927.468 2.322-.296 3.112l-2.834 2.93a1.875 1.875 0 0 1-1.383.585 1.88 1.88 0 0 1-1.371-.615l-5.782-6.179c-.756-.808-1.68-2.301-2.06-3.331l-4.543-12.277c-.382-1.031-.84-2.754-1.023-3.84l-1.506-8.952c-.183-1.09-.312-2.859-.288-3.972l.22-10.16c.023-1.104.203-2.889.397-3.96l1.802-9.972c.196-1.083.71-2.79 1.142-3.802l2.585-6.042a45.244 45.244 0 0 1 1.769-3.59l3.526-6.288a57.938 57.938 0 0 1 2.097-3.402l.11-.162c.617-.913 1.752-1.02 2.535-.24l5.099 5.076z"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M57.286 68.45c.658-.885 1.87-1.026 2.72-.303l4.153 3.526c.844.717 1.084 2.068.524 3.036l-3.54 6.12c-.555.96-1.447 2.505-2.002 3.471l-2.281 3.97a30.77 30.77 0 0 0-1.71 3.6l-2.1 5.485a60.02 60.02 0 0 0-1.275 3.778l-1.787 6.095c-.31 1.057-.64 2.8-.737 3.902l-.612 6.869a46.374 46.374 0 0 0-.148 3.98l.14 9.312c.016 1.1.16 2.881.322 3.97l1.29 8.706c.163 1.093.612 2.823.999 3.85l3.007 7.984a46.092 46.092 0 0 0 1.605 3.665l3.236 6.447a38.202 38.202 0 0 0 2.018 3.455l3.222 4.79c.617.917.458 2.263-.362 3.014l-3.783 3.461c-.817.748-1.974.607-2.583-.312l-8.193-12.378a32.003 32.003 0 0 1-1.947-3.483l-3.912-8.412c-.466-1.003-1.03-2.7-1.255-3.782l-2.133-10.203a61.031 61.031 0 0 1-.664-3.951l-1.223-9.584c-.14-1.096-.206-2.884-.148-3.977l.515-9.715c.058-1.1.276-2.865.489-3.951l2.035-10.385c.212-1.081.69-2.793 1.073-3.834l2.793-7.608a31.658 31.658 0 0 1 1.656-3.628l4.864-8.816a35.437 35.437 0 0 1 2.159-3.355l3.575-4.808v-.001z"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M42.098 56.514c.635-.903 1.797-1.004 2.58-.238l3.885 3.795c.79.772.942 2.141.332 3.07l-4.027 6.128a65.063 65.063 0 0 0-2.066 3.413l-1.98 3.562a79.34 79.34 0 0 0-1.83 3.543l-3.227 6.74a37.21 37.21 0 0 0-1.488 3.712l-1.363 4.153a50 50 0 0 0-1.063 3.863l-1.62 7.233a28.698 28.698 0 0 0-.54 3.955l-.525 10.074a238.821 238.821 0 0 1-.249 4l-.377 5.214c-.08 1.104-.05 2.887.068 3.995l.779 7.32c.117 1.104.417 2.879.665 3.947l2.534 10.9c.25 1.076.814 2.78 1.247 3.778l4.035 9.294a50.19 50.19 0 0 0 1.76 3.576l3.96 7.163c.535.966 1.485 2.47 2.133 3.373l3.497 4.875c.644.897.47 2.184-.391 2.876l-3.387 2.723a2.01 2.01 0 0 1-2.218.195 2.015 2.015 0 0 1-.599-.503l-6.017-7.449c-.695-.861-1.682-2.358-2.198-3.335l-4.875-9.219a86.801 86.801 0 0 1-1.77-3.587l-2.76-6.007c-.458-1-1.073-2.664-1.377-3.733l-2.356-8.283a34.366 34.366 0 0 1-.82-3.91l-1.552-11.235a34.264 34.264 0 0 1-.268-3.994l.033-10.192c.003-1.107.084-2.889.182-3.997l1.217-13.835c.097-1.1.45-2.844.79-3.899l2.674-8.303c.412-1.265.845-2.523 1.298-3.774l2.952-8.056c.379-1.032 1.148-2.628 1.723-3.571l5.504-9.03a73.369 73.369 0 0 1 2.188-3.34l4.907-6.98zM177.006 85.68c-.784.78-.947 2.176-.366 3.116l3.783 6.12c.581.941 1.42 2.523 1.874 3.536l3.137 6.995c.454 1.012.98 2.722 1.174 3.81l1.55 8.697c.196 1.092.37 2.863.39 3.974l.154 8.611c.02 1.103-.168 2.863-.424 3.948l-1.983 8.408c-.254 1.077-.846 2.754-1.326 3.755l-3.084 6.417a37.758 37.758 0 0 1-1.956 3.484l-2.728 4.21c-.601.927-.468 2.322.296 3.112l2.834 2.93a1.875 1.875 0 0 0 1.384.585 1.881 1.881 0 0 0 1.37-.615l5.783-6.179c.756-.808 1.679-2.301 2.06-3.331l4.542-12.277c.382-1.031.84-2.754 1.023-3.84l1.506-8.952c.183-1.09.312-2.859.288-3.972l-.219-10.16a30.758 30.758 0 0 0-.398-3.96l-1.802-9.972c-.196-1.083-.71-2.79-1.142-3.802l-2.585-6.042a45.21 45.21 0 0 0-1.769-3.59l-3.526-6.288a58.045 58.045 0 0 0-2.097-3.402l-.11-.162c-.616-.913-1.752-1.02-2.535-.24l-5.098 5.076z"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M198.805 68.45c-.658-.885-1.87-1.026-2.72-.303l-4.152 3.526c-.844.717-1.084 2.068-.524 3.036l3.54 6.12c.555.96 1.446 2.505 2.002 3.471l2.281 3.969c.55.958 1.316 2.568 1.71 3.6l2.1 5.485c.395 1.03.967 2.729 1.275 3.778l1.786 6.095c.31 1.057.64 2.8.738 3.902l.612 6.869c.106 1.324.155 2.652.147 3.98l-.138 9.312a36.375 36.375 0 0 1-.323 3.97l-1.291 8.706c-.162 1.093-.611 2.823-.998 3.85l-3.007 7.984a46.201 46.201 0 0 1-1.605 3.665L197 165.912a38.192 38.192 0 0 1-2.017 3.455l-3.222 4.79c-.617.917-.459 2.263.362 3.014l3.783 3.461c.817.748 1.974.607 2.583-.312l8.192-12.378a31.734 31.734 0 0 0 1.948-3.483l3.912-8.412c.466-1.003 1.03-2.7 1.255-3.782l2.133-10.203c.227-1.086.524-2.855.664-3.951l1.223-9.584c.14-1.096.206-2.884.148-3.977l-.515-9.715a34.08 34.08 0 0 0-.49-3.951l-2.035-10.385c-.273-1.3-.631-2.58-1.072-3.834l-2.793-7.608a31.572 31.572 0 0 0-1.656-3.628l-4.865-8.816a35.453 35.453 0 0 0-2.158-3.355l-3.576-4.808h.001z"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M211.329 56.276c.783-.766 1.945-.665 2.581.238h-.001l4.908 6.98a74.05 74.05 0 012.188 3.34l5.503 9.03c.575.943 1.345 2.539 1.723 3.571l2.952 8.056c.374 1.02.959 2.722 1.299 3.774l2.673 8.303c.34 1.055.693 2.799.79 3.899l1.218 13.835c.108 1.33.168 2.663.182 3.997l.032 10.192a34.082 34.082 0 01-.268 3.994l-1.551 11.235a34.432 34.432 0 01-.821 3.91l-2.355 8.283a31.207 31.207 0 01-1.378 3.733l-2.759 6.007a85.8 85.8 0 01-1.77 3.587l-4.875 9.219c-.517.977-1.503 2.474-2.199 3.335l-6.016 7.449c-.7.866-1.957.998-2.817.308l-3.387-2.723a2.132 2.132 0 01-.392-2.876l3.497-4.875a41.178 41.178 0 002.133-3.373l3.961-7.163a49.978 49.978 0 001.76-3.576l4.034-9.294c.434-.998.997-2.702 1.247-3.778l2.534-10.9c.288-1.304.511-2.621.666-3.947l.778-7.32c.118-1.108.148-2.891.068-3.995l-.377-5.214c-.08-1.115-.191-2.895-.248-4l-.525-10.074c-.057-1.1-.3-2.877-.542-3.955l-1.618-7.233a50.096 50.096 0 00-1.064-3.863l-1.362-4.153a36.991 36.991 0 00-1.489-3.712l-3.226-6.74a78.713 78.713 0 00-1.83-3.543l-1.98-3.562a65.613 65.613 0 00-2.066-3.413l-4.028-6.128c-.61-.929-.457-2.298.333-3.07l3.884-3.795zM105.408 82.375c-.819.493-1.52 1.182-3.395 2.622l-.509.39c-3.975 3.049-6.281 4.817-10.554 10.992l-.346.5c-4.135 5.972-4.665 6.737-6.714 14.308-1.513 5.588-1.435 7.135-1.271 10.425.064 1.289.142 2.846.143 5.017 0 1.843-.03 3.181-.054 4.23-.076 3.345-.085 3.763 1.192 8.282 1.384 4.899 1.855 5.551 3.843 8.303.42.584.91 1.261 1.491 2.094.326.466.626.901.909 1.309 2.6 3.753 3.668 5.297 8.528 9.461.813.697 1.51 1.308 2.132 1.854 3.499 3.07 4.605 4.04 10.422 6.218 6.309 2.363 7.829 2.413 14.378 2.629l1.802.061 1.278.045c6.873.247 7.302.263 14.39-1.619 6.497-1.726 7.183-2.163 11.279-4.777.634-.405 1.349-.861 2.181-1.383 3.29-2.063 4.689-2.937 5.889-4.029 1.063-.967 1.97-2.105 3.897-4.394l.394-.467c3.736-4.432 4.156-4.93 6.384-10.783 2.276-5.978 2.453-7.541 3.302-15.034l.032-.281c.481-4.242.721-5.764.653-7.272-.056-1.242-.322-2.475-.834-5.213-1.135-6.059-1.386-7.177-4.658-13.361-2.885-5.453-3.405-5.989-6.708-9.393-.443-.456-.936-.964-1.491-1.542-2.479-2.583-3.531-3.73-4.747-4.665-1.087-.836-2.305-1.502-4.791-2.875-5.265-2.907-6.519-3.551-13.475-5.167-4.437-1.032-5.758-.97-7.851-.87a47.113 47.113 0 01-5.019.01c-6.387-.303-7.96.135-14.81 2.043l-.756.21c-4.225 1.176-5.478 1.486-6.536 2.122zM80.836 223.178c-.355 1.053.255 1.9 1.36 1.9h4.531c1.103 0 2.323-.836 2.721-1.866l3.704-9.586c.399-1.033 1.612-1.867 2.712-1.867h11.746c1.1 0 2.318.834 2.72 1.86l3.824 9.76c.402 1.027 1.623 1.845 2.726 1.825l5.106-.09c1.108-.02 1.698-.88 1.328-1.92l-16.418-46.253c-.368-1.037-1.567-1.885-2.676-1.885h-5.13c-1.113 0-2.294.851-2.648 1.9l-15.606 46.222zm15.286-20.571c-.246 1.059.44 1.94 1.54 1.94h9.594l-4.561-18.797h-2.65l-3.923 16.857zM136.475 175.714l8.486-.137.716 35.126s.778 4.31 2.726 6.32c1.948 2.01 5.173 1.827 5.173 1.827s4.89.83 7.523-.299c2.632-1.128 3.205-1.82 4.531-4.867 1.326-3.046.836-7.462.836-7.462l-.266-30.162 10.322-.124-.439 32.3s-.609 5.629-3.762 10.018c-3.154 4.39-2.916 4.47-8.14 6.55-5.226 2.079-6.049 2.137-11.194 1.144-5.145-.994-7.546-2.597-10.91-5.22-3.365-2.621-4.31-5.86-4.31-5.86l-1.233-4.5-.06-34.654h.001z"></path> </g></svg>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>

</html>

P.S. возможно, не самый удачный выбор лого у меня, но думаю, суть Вы поняли

Привязать объект к правой части экрана с учётом внешнего padding

Ответы