嘿,我正在用它的名称,作者和其他一些东西来设计文章的简短列表,总的来说,我的代码工作正常(虽然不是最好,但是可以工作),看起来像:
问题是我刚刚注意到我的href和p和h2元素正在进入另一个在我眼中完全不好的元素,我如何尝试对其进行修复,使其显示href的显示块,但它根本无法正常工作。
在这里有人可以帮助我使该标签与child相等,并且不干扰其他元素吗?
HTML:
<div id="article-container">
<ul>
<li><a href="#"><img src="images/foto.jpg" alt="Popis"></a>
<h2><a href="#">Název článku</a></h2>
<p><span><strong>28. 2. 2014 8:29</strong> od Dwandy</span><br>
Ahoj, jak se máš? Já úplně úžasně a úpe nejvíc. Závidíš, he? </p>
<p class="more"><a href="#" class="links">Přečíst</a><br>
<a href="#">4 reakce</a></p>
<hr>
</li>
<li><a href="#"><img src="images/foto.jpg" alt="Popis"></a>
<h2><a href="#">Název článku</a></h2>
<p><span><strong>28. 2. 2014 8:29</strong> od Dwandy</span><br>
Ahoj, jak se máš? Já úplně úžasně a úpe nejvíc. Závidíš, he? </p>
<p class="more"><a href="#" class="links">Přečíst</a><br>
<a href="#">4 reakce</a></p>
<hr>
</li>
<li><a href="#"><img src="images/foto.jpg" alt="Popis"></a>
<h2><a href="#">Název článku</a></h2>
<p><span><strong>28. 2. 2014 8:29</strong> od Dwandy</span><br>
Ahoj, jak se máš? Já úplně úžasně a úpe nejvíc. Závidíš, he? </p>
<p class="more"><a href="#" class="links">Přečíst</a><br>
<a href="#">4 reakce</a></p>
<hr>
</li>
</ul>
</div>
CSS:
#article-container{
width: 980px;
margin: 0 auto;
color:#4d4d4d;
font-size:90%;
height: 144px;
}
#article-container br, hr {
display:none;
}
#article-container ul {
width:960px;
height: 144px
overflow:hidden;
margin:0;
padding:15px 0;
}
#article-container li {
width:310px;
display:inline-block;
list-style:none;
padding:0;
margin:0px 0px 0px 8px;
}
#article-container li a{
display:block;
}
#article-container img {
float:left;
margin: 0 10px 0 0
}
#article-container a img {
border:2px solid #999e8a
}
#article-container a:hover img {
border-color:#000
}
#article-container h2 {
margin: 0;
padding: 0 0 10px 0;
font-size:110%;
font-weight:normal;
}
#article-container h2 a {
color:#4d4d4d
}
#article-container h2 a:hover {
color:#840000
}
#article-container p {
padding: 0 10px 0 0;
margin:0
}
#article-container p span {
display:block;
padding: 0 0 5px 0
}
#article-container p.more {
padding: 0px 0 0 0;
overflow:hidden
}
#article-container p.more a {
color:#2e79bc;
line-height: 27px;
}
#article-container p.more a:hover {
color:#840000
}
#article-container p.more a.links {
float:right;
padding: 5px 10px;
background:#2e79bc;
color:#fff;
margin-right:15px;
text-decoration:none;
border-radius:3px;
line-height: 18px;
}
#article-container p.more a.links:hover {
background:#000
}
演示:FIDDLE全部WEBSITE DEMO
感谢您阅读这篇文章:)
最佳答案
你应该放
overflow: none;
输入所有标签。
关于html - CSS-文章样式的简短列表,但 parent 要比 child 小,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23322208/