在每个列表项中,我在 div 元素中都有一个文本框。
<html>
<body>
<!-- Window -->
<div id="sample_container_id">
<div class="bucket" id="defaultBucket">
<h3>Default Bucket</h3>
<input type="button" value="Add" class="button">
<div class="innerBucket">
<ul id="tasks">
<li>
<div class="TaskDiv">
<input type="text" class="TaskTextInput">
</div>
</li>
<li>
<div class="TaskDiv">
<input type="text" class="TaskTextInput">
</div>
</li>
<li>
<div class="TaskDiv">
<input type="text" class="TaskTextInput">
</div>
</li>
</ul>
</div> <!-- innerBucket -->
</div> <!-- defaultBucket -->
</div>
</body>
</html>
这是结果:
body
{
background-color: #F8F8F8;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.2em;
margin: 15px;
}
h1, p
{
color: #333;
}
#sample_container_id
{
width: 100%;
height: 400px;
position: relative;
border: 1px solid #ccc;
background-color: #fff;
margin: 0px;
}
.innerBucket
{
width: 290px;
height: 355px;
margin-top: 40px;
margin-left: 5px;
position: relative;
background-color: white;
}
.bucket
{
width: 300px;
height: 400px;
background-color: #ddd;
position: absolute;
}
.bucket h3
{
float: left;
padding-left: 10px;
padding-top: -10px;
}
.bucket ul
{
margin: 0;
padding-left: 30px;
position: relavtive;
list-style: none;
}
.bucket ul li
{
margin: 0;
padding: 0;
text-indent: 0.5em;
margin-left: -0.5em;
display: block;
position: relative;
}
.bucket .button
{
background-color:#fbb450;
border:1px solid #c97e1c;
float: right;
margin: 5px;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:17px;
font-weight:bold;
padding:2px 11px;
text-decoration:none;
text-shadow:0px 1px 0px #8f7f24;
}
结果
您可能会注意到第一项是缩进的,我希望列表项全部在左侧对齐。我如何用 CSS 解决这个问题(我的 CSS 可能有很多问题,我正在尝试一切)?
编辑
我添加了更多代码。您现在应该能够复制该问题。我不想贴一堵代码墙:)
解决方案
我找到了问题的解决方案。问题实际上是<h3>
元素。底部边距迫使第一个元素移到一边。
添加这个解决了这个问题:
.bucket h3
{
...
margin-bottom: 0;
}