Хотите выровнять раскрывающийся список по правому краю, используя сетку css

Question

Я учусь использовать сетку css. Я хочу выровнять гибкое раскрывающееся меню вправо, используя сетку css. Я знаю, что будет много способов выполнить это простое требование, но я хочу выполнить это с помощью сетки css. Я взял выпадающий код из bootstrap для быстрой работы. Код ниже. раскрывающийся список не выровнен по правому краю. Пожалуйста, помогите.

/*
#mydiv ul{
    text-align:right;
}*/
/*#mydiv ul { list-style:none;}*/

#mydiv {
    grid-column-start: 250;
    grid-column-end:300;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<div class = "container" id="mydiv">
  <ul>
 <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle dropdown-menu-right" href="#" id="mydiv" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
</div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Answer 1

У вас есть дополнительный mydiv идентификатор в раскрывающейся ссылке, вы должны удалить его (удалено в моем примере). В противном случае это может испортить вас позже. 1005 *justify-self:end укажет элементу придерживаться правого края столбца.

Однако при этом выпадающий список будет обрезан по правому краю, поэтому вам, возможно, придется поэкспериментировать с ним.

Подробнее о css столбцах

#mydiv {
  display: grid;
  justify-content: end;
  grid-template-columns: 70% 30%
}

#mydiv ul {
  grid-column-start: 2;
  grid-column-end: 2;
  justify-self: end;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<div class = "container" id="mydiv">
  <ul>
 <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle dropdown-menu-right" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
</div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Answer 2

Если вы собираетесь использовать grid, вам необходимо добавить это свойство. Очень простой пример c, который может вам помочь:

#mydiv {
  display: grid;
  justify-content: end;
//your old properties
  grid-column-start: 250;
  grid-column-end:300;
}

В любом случае, учитывая, что для сетки лучше указывать строки / столбцы.