语义UI CSS右填充

我有用于制作卡片堆叠盒的此代码。问题是，这个盒子向我展示了一个正确的paddding在片段中，任何人都可以帮助我？语义UI CSS右填充

<!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”类（它使用flexbox来完美地适应卡片）。

在文档中发现的代码：

<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。 –

语义UI CSS右填充

回答

相关问题