Выравнивание Materialize CSS разборно по горизонтали? - PullRequest
Новая
       3

Выравнивание Materialize CSS разборно по горизонтали?

0 голосов
/ 23 декабря 2018

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

<!DOCTYPE html>
<html>
<head>
  
  
  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  
  <link rel = "stylesheet"
  href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
  </script>

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>
<body >
<br><br><br><br>


  <ul style="display: inline" class="collapsible">
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div style="display: none"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div style="display: none"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div style="display: none"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>
     <script>
 $(".collapsible").collapsible()
</script>   
</body>

</html>

Но когда я щелкаю первый складной заголовок, остальные два складных заголовка опускаются ниже складного тела первого складного.

Когда я щелкаю по второму складному заголовку, первый складной заголовок фиксируется (хорошо), но третий складной заголовок опускается ниже тела второго складного.

Нажатие на последнийскладной заголовок работает нормально (как и ожидалось).

Может кто-нибудь дать мне обходной путь для этого?

Заранее спасибо, Nikhil

1 Ответ

0 голосов
/ 23 декабря 2018

Вы должны установить position: absolute на collapsible-body, но это не идеальный способ, потому что, как упоминалось в @ ic3b3rg, этот компонент не предназначен для горизонтальной работы, поэтому вместо него вы можете использовать tabs или любой другой.другой горизонтальный гармошка. 

<!DOCTYPE html>
<html>
<head>
  
  
  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  
  <link rel = "stylesheet"
  href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
  </script>

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>
<body >
<br><br><br><br>


  <ul style="display: inline" class="collapsible">
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div style="display: none;position:absolute;"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div style="display: none;position:absolute;"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div style="display: none;position:absolute;"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>
     <script>
 $(".collapsible").collapsible()
</script>   
</body>

</html>
...