我使用的是语义ui框架。我想尝试像结构一样发表评论。目前我的代码如下:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<title>Assignments</title>
<style>
.items {
width: 70%;
border: solid;
margin: 100px;
}
</style>
</head>
<body>
<div class="ui items">
<div class="item">
<a class="ui tiny image">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="header">Jenny Hess</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="description">
<p>First Post Ever In My Life</p>
</div>
</div>
</div>
<div class="ui comments">
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Matt</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
How artistic!
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!</p>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 days ago</span>
</div>
<div class="text">
Dude, this is awesome. Thanks so much
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea rows="3" cols="50"></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
</div>
<div class="ui items">
<div class="item">
<a class="ui tiny image">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="header">Jenny Hess</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="description">
<p>First Post Ever In My Life</p>
</div>
</div>
</div>
<div class="ui comments">
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Matt</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
How artistic!
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!</p>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 days ago</span>
</div>
<div class="text">
Dude, this is awesome. Thanks so much
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea rows="3" cols="50"></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
</div>
</body>
</html>
正如你所看到的,我已经将项目的宽度设为70%并且自动保证金为止,但它并不居中。有人可以建议我为什么吗?
答案 0 :(得分:0)
将特定ID提供给此类项目的父级并提供
text-align: center;
造型风格
如果您需要进一步的帮助,请告诉我