Как сделать так, чтобы ссылки / ссылки в сетке CSS выглядели как встроенные, а не как блоки? - PullRequest
Новая
       5

Как сделать так, чтобы ссылки / ссылки в сетке CSS выглядели как встроенные, а не как блоки?

0 голосов
/ 27 сентября 2018

Когда я вставляю ссылку в контейнер div с использованием CSS-сетки, она обрабатывает ссылку как элемент блока вместо встроенного.Даже когда я пытаюсь заставить это быть встроенным, это все еще рассматривает это как блок.Как я могу сделать отображение ссылки встроенным?

Спасибо за вашу помощь. 

#container {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 180px 180px
}

.item {
  display: grid;
  border: 1px solid #ccc;
}
<div id="container">
  <div class="item">
    Text with a <a href="#">link</a> in it. This is text without a link in it.
  </div>

  <div class="item">
    Text with a <a href="#" style="display: inline;">link</a> in it. This is text without a link in it.
  </div>
</div>

Это то, что приведенный выше код будет отображать как: Output

Ответы [ 3 ]

0 голосов
/ 27 сентября 2018

Просто удалите строку для элемента. 

<style>
    #container{
     display: grid;
     grid-template-rows: 100px 100px ;
     grid-template-columns: 180px 180px;
    }
  </style>
  <div id="container">
    <div class="item">
    Text with a <a href="#">link</a> in it.
    This is text without a link in it.
    </div>

    <div class="item"> 
    Text with a <a href="#" style="display: inline;">link</a> in it.
    This is text without a link in it.
    </div>
  </div>
0 голосов
/ 27 сентября 2018

Использование селектора элементов в сетке CSS

Поскольку вы создали элемент <div> a grid, он обрабатывает все содержимое внутри него также как grid.

Для переходаиз этого вы можете обернуть свой контент во что-то вроде <span>, как показано в приведенном ниже коде.

Все, что находится внутри этих элементов-оболочек, по умолчанию вернется к своим состояниям по умолчанию, равным inline или * 1012.* и действуйте как обычно.

Вы также можете использовать другие элементы селекторы также, например, <div>text</div>, <p>text</p> или все, что подходит вашему дизайну.

enter image description here

#container {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 180px 180px
}

.item {
  display: grid;
  border: 1px solid #ccc;
}
<div id="container">
  <div class="item">
    Text with a <a href="#">link</a> in it. This is text without a link in it.
  </div>

  <div class="item">
    <span>Text with a <a href="#">link</a> in it. This is text without a link in it.</span>
  </div>
</div>
0 голосов
/ 27 сентября 2018

Вы заставили .item быть полем сетки, поэтому каждый тег в .item будет выровнен как элемент сетки, такой как <a>, поэтому просто удалите из .item display: grid;, потому что я думаю, что вы не будете использовать его какполе сетки, но как элемент сетки #container. 

#container {
  display: grid;
  grid-template-rows: 100px 100px ;
  grid-template-columns: 180px 180px 
}
    
.item {
  border:1px solid #ccc;
}
<div id="container">
   <div class="item">
      Text with a <a href="#">link</a> in it.
      This is text without a link in it.
   </div>

   <div class="item"> 
      Text with a <a href="#">link</a> in it.
      This is text without a link in it.
   </div>
</div>
...