сделать так, чтобы значок отображался под именем li

ProgramBox

сделать так, чтобы значок отображался под именем li

Post author:admin
Запись опубликована:27 сентября, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Как я могу сделать так, чтобы значок ion-edit отображался под названием списка. например, значок должен появиться под именами Oracl, PostgresSQL, Mysql, а затем должна появиться нижняя строка границы. В моем случае он отображается в правой части каждого списка имен.Я хочу, чтобы он находился под именами списков с некоторым пробелом.

при нажатии на подключения к источнику данных там будет показан подсписок, значок карандаша должен быть выровнен под каждым именем.

Нужно ли включать какое-либо свойство css?

 $('.src-sub-menu').click(function() {
  $(this).toggleClass('submenu-open').parent('li').siblings('li').children('h4.submenu-open').removeClass('submenu-open');
  $(this).parent().toggleClass('submenu-opensubmenu-open').children('ul').slideToggle(500).end().siblings('.submenu-open').removeClass('submenu-open').children('ul').slideUp(500);
  $('html, body').animate({
    scrollTop: (0),
  }, "fast"); /*this will scroll upto the top, not sure if I want to use this yet */
});

 .whole-dbsource {
  height: 100%;
}

.db-pagerow {
  margin-left: 12%;
  justify-content: center;
  height: 80%;
}

.source-container {
  height: 300px; /* ED: Changed to see the dropdown */
  border-radius: 10px;
  background-color: white;
  overflow: scroll;
  position: relative;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
}

h5 {
  padding: 10px;
  margin: 0;
}

h5.submenu-open {
  padding: 10px;
  color: white;
  background-color: #28be9a;
}

ul.src-main-menu {
  position: relative;
  list-style-type: none;
  height: 12px;
}

ul.src-main-menu .src-main-sub {
  margin: 20px 0;
}

ul.src-main-menu li.src-main-sub {
  padding: 1px 0px;
  cursor: pointer;
  background-color: #e0e0e0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

ul.src-main-menu li ul {
  list-style-type: none;
  color: black;
  display: none;
  position: relative;
  max-height: 1000px;
  /*fallback for FireFox */
  height: 100%;
}

ul.src-main-menu li ul i {
  display: inline-block;
}

.src-main-sub ul li {
  border-bottom: 1px solid black;
  margin: 20px 0;
}

.src-main-sub ul li:last-child {
  border-bottom: none;
  margin: 0;
}

ul.src-main-menu li ul.open {
  display: block;
}

ul.src-main-menu .src-main-sub i {
  transition: all 0.5s;
  position: absolute;
  right: 10px;
}

ul.src-main-menu li i.closed {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
}

ul.src-main-menu li i.open {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>

<div class="container-fluid whole-dbsource">
  <div class="row db-pagerow">
    <div class="col-sm-7 source-container">
      <ul class="src-main-menu">
        <li class="src-main-sub">
          <h5 class="src-sub-menu">Data Source Connections<i class="ion-chevron-down closed"></i></h5>
          <ul class="closed">
            <li>Oracle 12c<i class="ion-edit"></i></li>
            <li>PostgresSQL<i class="ion-edit"></i></li>
            <li>MySql<i class="ion-edit"></i></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

1. Я пытался найти значок из http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css не могли бы вы обновить свой код с помощью файлов CSS / Icon

2. @mplungjan благодарит, что теперь добавлен значок редактирования. Я хочу выровнять их под каждым именем li

3. нажмите на имя подключения к источнику данных, и вы увидите подсписок со значками

4. хорошо, как я могу выровнять их под каждым именем?

5. Можете ли вы нарисовать, что вы имеете в виду?

Ответ №1:

 $('.src-sub-menu').click(function() {
  $(this).toggleClass('submenu-open').parent('li').siblings('li').children('h4.submenu-open').removeClass('submenu-open');
  $(this).parent().toggleClass('submenu-opensubmenu-open').children('ul').slideToggle(500).end().siblings('.submenu-open').removeClass('submenu-open').children('ul').slideUp(500);
  $('html, body').animate({
    scrollTop: (0),
  }, "fast"); /*this will scroll upto the top, not sure if I want to use this yet */
});

 .whole-dbsource {
  height: 100%;
}

.db-pagerow {
  margin-left: 12%;
  justify-content: center;
  height: 80%;
}

.source-container {
  height: 300px; /* ED: Changed to see the dropdown */
  border-radius: 10px;
  background-color: white;
  overflow: scroll;
  position: relative;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
}

h5 {
  padding: 10px;
  margin: 0;
}

h5.submenu-open {
  padding: 10px;
  color: white;
  background-color: #28be9a;
}

ul.src-main-menu {
  position: relative;
  list-style-type: none;
  height: 12px;
}

ul.src-main-menu .src-main-sub {
  margin: 20px 0;
}

ul.src-main-menu li.src-main-sub {
  padding: 1px 0px;
  cursor: pointer;
  background-color: #e0e0e0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

ul.src-main-menu li ul {
  list-style-type: none;
  color: black;
  display: none;
  position: relative;
  max-height: 1000px;
  /*fallback for FireFox */
  height: 100%;
  margin:0;
  padding:0;
}

ul.src-main-menu li ul i {
  display: inline-block;
}

.src-main-sub ul li {
  border-bottom: 1px solid black;
  margin: 20px 0;
  padding:0 5px;
}

.src-main-sub ul li:last-child {
  border-bottom: none;
  margin: 0;
}

ul.src-main-menu li ul.open {
  display: block;
}

ul.src-main-menu .src-main-sub i {
  transition: all 0.5s;
   
}
ul.src-main-menu .src-main-sub i.ion-chevron-down {
  transition: all 0.5s;
  position: static;
  left: 0;
}

ul.src-main-menu li i.closed {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
}

ul.src-main-menu li i.open {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>

<div class="container-fluid whole-dbsource">
  <div class="row db-pagerow">
    <div class="col-sm-7 source-container">
      <ul class="src-main-menu">
        <li class="src-main-sub">
          <h5 class="src-sub-menu">Data Source Connections<i class="ion-chevron-down closed float-right"></i></h5>
          <ul class="closed">
            <li><span class='d-block'>Oracle 12c</span><i class="ion-edit d-block mt-2"></i></li>
            <li><span class='d-block'>PostgresSQL</span><i class="ion-edit d-block mt-2"></i></li>
            <li><span class='d-block'>MySql</span><i class="ion-edit d-block mt-2"></i></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

Ответ №2:

Эта часть вашего кода выравнивает ваши значки вправо, удалите ее и посмотрите на эффект.

 ul.src-main-menu .src-main-sub i {
  transition: all 0.5s;
  position: absolute;
  right: 10px;
}

Приведенный ниже код даст вам то, что вы хотите

 .closed li{
    display: flex;
    justify-content: center; // remove this if you don't want them centered
    align-items: center;
    flex-direction: column;
}