我正在尝试删除额外的边距 - 橙色空间,并向上移动红点。有人可以帮忙吗?我尝试过使用css标签 - margin,padding。但是,无法让它发挥作用。
<div style="padding:0px; margin-right:0px; width: 280; font-family:Arial, Helvetica, sans-serif ;font-size: 40px; font-weight: bold;color:#33A8FF">
Current Status
</div>
<div id= "redC" style="width: 10px;
height: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: red;
margin-left: 400px
">
</div>
&#13;
答案 0 :(得分:1)
使用display:inline-block
和vertical-align:middle;
进行div,这将使div成为一条直线并垂直居中并尽量避免inline css
div {
display: inline-block;
vertical-align:middle;
}
.CurrentStatus {
padding: 0px;
margin-right: 0px;
width: 280;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
font-weight: bold;
color: #33A8FF
}
#redC {
width: 10px;
height: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: red;
margin-left: 40px
}
<div class="CurrentStatus">
Current Status
</div>
<div id="redC">
</div>
答案 1 :(得分:0)
方法1)将display: inline-block
插入div
,如下所示:
div {
display: inline-block;
}
方法2)使用:after
:
div {
position: relative;
padding:0px;
margin-right:0px;
width: 280px;
font-family:Arial, Helvetica, sans-serif ;
font-size: 40px;
font-weight: bold;
color:#33A8FF;
}
div:after {
content: '';
height: 10px;
width: 10px;
position: absolute;
background-color: red;
border-radius: 100%;
top: 50%;
right: -10px;
}
<div>Current Status</div>
答案 2 :(得分:0)
这将有效
<div style="padding:0px; margin-right:0px; width: 280; font-family:Arial, Helvetica, sans-serif ;font-size: 40px; font-weight: bold;color:#33A8FF; float:left">
Current Status
</div>
<div id= "redC" style="width: 10px;
height: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: red;
float:left;
margin-top:20px;
">
</div>
答案 3 :(得分:0)
您可以将display:inline-block
用于这两个div。
div {display:inline-block}