Semantic UI CSS right padding

У меня есть этот код для создания карточных стекол. Проблема в том, что этот ящик показывает мне правильный паттерн в фрагменте, может ли кто-нибудь мне помочь?Semantic UI CSS right padding

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="./semantic/semantic.css"/> 
    <title>Agora</title> 
</head> 
<body> 
<div class="ui teal inverted menu" style="border-radius: 0px;"> 
    <div class="item"> 
     <div class="huge ui buttons"> 
     <div class="ui button">One</div> 
     <div class="ui button">Two</div> 
     <div class="ui button">Three</div> 
    </div> 
    </div> 
    <div class="item"> 
     <div class="ui button">Log-in</div> 
    </div> 
</div> 

<div class="ui column centered grid"> 
    <div class="fourteen wide column"> 
     <div class="ui center aligned segment"> 


      <div class="ui stackable four column centered grid" > 
       <div class="column"> 
        <div class="ui card"> 
         <div class="image"> 
          <img src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> 
         </div> 
         <div class="content"> 
          <a class="header">Stevie Feliciano</a> 
          <div class="meta"> 
           <span class="date">Joined in 2014</span> 
          </div> 
          <div class="description"> 
           Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing. 
          </div> 
         </div> 
         <div class="extra content"> 
          <a> 
           <i class="user icon"></i> 
           22 Friends 
          </a> 
         </div> 
        </div> 
       </div> 
       <div class="column"> 
        <div class="ui card"> 
         <div class="image"> 
          <img src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> 
         </div> 
         <div class="content"> 
          <a class="header">Stevie Feliciano</a> 
          <div class="meta"> 
           <span class="date">Joined in 2014</span> 
          </div> 
          <div class="description"> 
           Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing. 
          </div> 
         </div> 
         <div class="extra content"> 
          <a> 
           <i class="user icon"></i> 
           22 Friends 
          </a> 
         </div> 
        </div> 
       </div> 
       <div class="column"> 
        <div class="ui card"> 
         <div class="image"> 
          <img src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> 
         </div> 
         <div class="content"> 
          <a class="header">Stevie Feliciano</a> 
          <div class="meta"> 
           <span class="date">Joined in 2014</span> 
          </div> 
          <div class="description"> 
           Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing. 
          </div> 
         </div> 
         <div class="extra content"> 
          <a> 
           <i class="user icon"></i> 
           22 Friends 
          </a> 
         </div> 
        </div> 
       </div> 
       <div class="column"> 
        <div class="ui card"> 
         <div class="image"> 
          <img src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> 
         </div> 
         <div class="content"> 
          <a class="header">Stevie Feliciano</a> 
          <div class="meta"> 
           <span class="date">Joined in 2014</span> 
          </div> 
          <div class="description"> 
           Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing. 
          </div> 
         </div> 
         <div class="extra content"> 
          <a> 
           <i class="user icon"></i> 
           22 Friends 
          </a> 
         </div> 
        </div> 
       </div> 
      </div> 


     </div> 
    </div> 
</div> 




</body> 
</html>

Это проблема изображения: http://imgur.com/1lrpbUL.png

Мне нужно удалить отступы, которая находится в правой части.

источник

2015-06-27 jaume5900

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

Вы можете использовать класс «.cards», который упоминается here (он отлично подходит для карт памяти).

Код в документации:

<div class="ui cards"> 

    <div class="card"> 
    <a class="image"> 
     <img src="/images/avatar/large/elliot.jpg"> 
    </a> 
    <div class="content"> 
     <a class="header">Elliot Fu</a> 
     <div class="meta"> 
     <a>Friends</a> 
     </div> 
     <div class="description"> 
     Elliot Fu is a film-maker from New York. 
     </div> 
    </div> 
    </div> 

    <div class="card"> 
    <a class="image"> 
     <img src="/images/avatar/large/helen.jpg"> 
    </a> 
    <div class="content"> 
     <a class="header">Helen Troy</a> 
     <div class="meta"> 
     <a>Friends</a> 
     </div> 
     <div class="description"> 
     Helen Troy is an archivist living in New York, who enjoys cooking, fine art, and gardening. 
     </div> 
    </div> 
    </div> 

</div>

источник

2015-06-27 19:50:31

Но я хочу карты, чтобы быть в центре ... Как я могу это сделать? – jaume5900

Извините, я не понял это из описания. Ну, если вы хотите, чтобы карты были центрированы внутри столбцов, вы можете установить text-align: center в столбец (и, возможно, установить право на дополнение на 0). Если .card имеет фиксированную ширину, вы должны использовать margin: 0 auto. –

Semantic UI CSS right padding

ответ

Смежные вопросы