Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/33.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 语义UI CSS右填充_Html_Css_Semantic Ui - Fatal编程技术网

Html 语义UI CSS右填充

Html 语义UI CSS右填充,html,css,semantic-ui,Html,Css,Semantic Ui,我有这个代码来制作一个卡片可堆叠的盒子。问题是这个盒子在片段中显示了一个正确的填充,有人能帮我吗 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="./semantic/semantic.css"/> <title>Agora</title> </he

我有这个代码来制作一个卡片可堆叠的盒子。问题是这个盒子在片段中显示了一个正确的填充,有人能帮我吗

<!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>

阿格拉
一个
两个
三
登录


我需要删除右侧的填充。

这可能是一个问题,因为这些卡的每一张都没有填满其列的宽度,所以它们都与左侧对齐

您可以使用上面提到的“.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>

傅艾略特
朋友
傅艾略特是一位来自纽约的电影制片人。
海伦特洛伊
朋友
海伦·特洛伊是一位住在纽约的档案管理员,她喜欢烹饪、美术和园艺。

以下是工作示例:


阿格拉
.ui.card{
保证金:自动;
}
一个
两个
三
登录
史蒂维·费利西亚诺
2014年加入
史蒂维·费利西亚诺是一位住在纽约市的图书馆科学家。她喜欢把时间花在阅读、跑步和写作上。
22位朋友
史蒂维·费利西亚诺
2014年加入
史蒂维·费利西亚诺是一位住在纽约市的图书馆科学家。她喜欢把时间花在阅读、跑步和写作上。
22位朋友
史蒂维·费利西亚诺
2014年加入
史蒂维·费利西亚诺是一位住在纽约市的图书馆科学家。她喜欢把时间花在阅读、跑步和写作上。
22位朋友
史蒂维·费利西亚诺
2014年加入
史蒂维·费利西亚诺是一位住在纽约市的图书馆科学家。她喜欢把时间花在阅读、跑步和写作上。
22位朋友

但我希望卡片居中。。。我是怎么做到的?对不起,我不是从描述中得到的。好的,如果您希望卡片在列的内部居中,您可以将text align:center设置为列的中心(并且可能将padding right设置为0)。如果.card具有固定宽度,则应使用边距:0 auto。