您好我想在日历div和文本之间放置一个空格。我尝试将margin-left
放在文本上,但它不起作用,而margin-right
放在日历div上,但正如预期的那样,它不起作用。有人可以给我点子吗?请帮帮我。我认为问题的原因是div日历的float:left;
。
这是我的侧边栏的html代码
<div class="fix sidebar floatright">
<div class="fix single_sidebar">
<div class="events">
<h2>Upcoming events</h2>
<hr class="carved">
<div class="fix single_popular">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
<h2>Vestibum Malesuada Etiam Magna</h2>
<p>7:00 AM - 8:00 PM</p>
</div>
<hr>
<div class="fix single_popular">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
<h2>Vestibum Malesuada Etiam Magna</h2>
<p>7:00 AM - 8:00 PM</p>
</div>
<hr>
<div class="fix single_popular">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
<h2>Vestibum Malesuada Etiam Magna</h2>
<p>7:00 AM - 8:00 PM</p>
</div>
</div>
</div>
</div>
这是我的侧栏和日历div的css。
hr.carved {
clear: both;
float: none;
width: 100%;
height: 2px;
border: none;
background: #ddd;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.5, rgb(126,27,18)),
color-stop(0.5, rgb(211,45,31))
);
background-image: -moz-linear-gradient(
center top,
rgb(126,27,18) 50%,
rgb(211,45,31) 50%
);
}
a {
color:#000;
text-decoration:none
}
a:hover,
a:focus,
a:active {
text-decoration:none;
outline:none;
}
h1,h2,h3,h4,h5,h6 {
font-weight:normal;
margin:0 0 15px;
}
.floatright {
float: right;
}
.floatleft {
float: left;
}
.fix {
overflow: hidden;
}
.sidebar {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #a92419;
padding:19px;
width: 250px;
}
.single_sidebar_ {
margin-bottom: 25px;
color:#898989;
}
.single_sidebar input {
width: 90%;
}
.events > h2,.single_sidebar > h2 {
color:#a92419;
font-size: 18px;
font-weight: bold;
line-height: 22px;
padding-bottom: 5px;
}
.single_sidebar a {
display: block;
color: #898989;
}
.single_sidebar a:hover {
text-decoration: underline;
}
.single_popular {
margin-bottom: 15px;
}
.single_popular img {
margin-right: 8px;
}
.single_popular h2 {
color:#898989;
font-size: 14px;
margin-bottom: 0px;
}
.single_popular p {
color: #717171;
font-size:11px;
margin-top: 5px;
}
.date {
display: block;
width: 60px;
height: 60px;
margin-bottom: 20px;
background: #fff;
text-align: center;
font-family: 'Helvetica', sans-serif;
position: relative;
float: left;
}
.date .month {
background: #a92419;
display: block;
padding-bottom: 5px;
padding-top: 5px;
color: #fff;
font-size: 10px;
font-weight: bold;
border-bottom: 2px solid #a92419;
box-shadow: inset 0 -1px 0 0 #a92419;
}
.date .day {
display: block;
margin: 0;
padding-bottom: 10px;
padding-top: 5px;
text-align: center;
font-size: 20px;
color:#a92419;
box-shadow: 0 0 3px #ccc;
position: relative;
}
.date .day::after {
content: '';
display: block;
height: 95%;
width: 96%;
position: absolute;
top: 3px;
left: 2%;
z-index: -1;
box-shadow: 0 0 3px #ccc;
}
.date .day::before {
content: '';
display: block;
height: 90%;
width: 90%;
position: absolute;
top: 6px;
left: 5%;
z-index: -1;
}
.events img{
height: 80px;
width: 140px;
}
答案 0 :(得分:2)
你可以使用margin-right
.date
{
margin-right:10px;
}
答案 1 :(得分:2)
.date {
display: block;
width: 60px;
height: 60px;
margin: 0 10px 20px 0;
background: #fff;
text-align: center;
font-family: 'Helvetica', sans-serif;
position: relative;
float: left;
}
答案 2 :(得分:1)
使用.date { margin-right: 10px }
hr.carved {
clear: both;
float: none;
width: 100%;
height: 2px;
border: none;
background: #ddd;
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.5, rgb(126, 27, 18)), color-stop(0.5, rgb(211, 45, 31)));
background-image: -moz-linear-gradient( center top, rgb(126, 27, 18) 50%, rgb(211, 45, 31) 50%);
}
a {
color: #000;
text-decoration: none
}
a:hover,
a:focus,
a:active {
text-decoration: none;
outline: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
margin: 0 0 15px;
}
.floatright {
float: right;
}
.floatleft {
float: left;
}
.fix {
overflow: hidden;
}
.sidebar {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #a92419;
padding: 19px;
width: 250px;
}
.single_sidebar_ {
margin-bottom: 25px;
color: #898989;
}
.single_sidebar input {
width: 90%;
}
.events > h2,
.single_sidebar > h2 {
color: #a92419;
font-size: 18px;
font-weight: bold;
line-height: 22px;
padding-bottom: 5px;
}
.single_sidebar a {
display: block;
color: #898989;
}
.single_sidebar a:hover {
text-decoration: underline;
}
.single_popular {
margin-bottom: 15px;
}
.single_popular img {
margin-right: 8px;
}
.single_popular h2 {
color: #898989;
font-size: 14px;
margin-bottom: 0px;
}
.single_popular p {
color: #717171;
font-size: 11px;
margin-top: 5px;
}
.date {
display: block;
width: 60px;
height: 60px;
margin-bottom: 20px;
background: #fff;
text-align: center;
font-family: 'Helvetica', sans-serif;
position: relative;
float: left;
margin-right: 10px;
}
.date .month {
background: #a92419;
display: block;
padding-bottom: 5px;
padding-top: 5px;
color: #fff;
font-size: 10px;
font-weight: bold;
border-bottom: 2px solid #a92419;
box-shadow: inset 0 -1px 0 0 #a92419;
}
.date .day {
display: block;
margin: 0;
padding-bottom: 10px;
padding-top: 5px;
text-align: center;
font-size: 20px;
color: #a92419;
box-shadow: 0 0 3px #ccc;
position: relative;
}
.date .day::after {
content: '';
display: block;
height: 95%;
width: 96%;
position: absolute;
top: 3px;
left: 2%;
z-index: -1;
box-shadow: 0 0 3px #ccc;
}
.date .day::before {
content: '';
display: block;
height: 90%;
width: 90%;
position: absolute;
top: 6px;
left: 5%;
z-index: -1;
}
.events img {
height: 80px;
width: 140px;
}
<div class="fix sidebar floatright">
<div class="fix single_sidebar">
<div class="events">
<h2>Upcoming events</h2>
<hr class="carved">
<div class="fix single_popular">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
<h2>Vestibum Malesuada Etiam Magna</h2>
<p>7:00 AM - 8:00 PM</p>
</div>
<hr>
<div class="fix single_popular">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
<h2>Vestibum Malesuada Etiam Magna</h2>
<p>7:00 AM - 8:00 PM</p>
</div>
<hr>
<div class="fix single_popular">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
<h2>Vestibum Malesuada Etiam Magna</h2>
<p>7:00 AM - 8:00 PM</p>
</div>
</div>
</div>
</div>