这是我的HTML
* {
padding: 0px;
margin: 0px;
font-family: 'Raleway', sans-serif;
font-weight: 400;
}
body {
text-align: center
}
#menu {
background-color: #03a9f4;
width: 100%;
height: 70px;
}
#logo {
margin-left: 100px;
margin-top: 15px;
margin-bottom: 15px;
width: 160px;
height: 40px;
float: left;
}
#right_side {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 15px;
}
#profile_picture {
height: 60px;
width: 60px;
background-color: white;
border-radius: 50%;
}
#arrow {
margin-bottom: 15px;
margin-top: 15px;
margin-left: 7.5px;
}
#content {
margin-top: 50px;
display: inline-block;
}
.icon {
margin-left: 10px;
margin-top: 20px;
margin-bottom: 20px;
}
#health_profile_title {
float: left;
font-size: 50px;
color: white;
font-weight: 300;
margin-left: 20px;
margin-top: 30px;
margin-bottom: 30px;
}
#short_ico {
margin-left: 42.5px;
margin-right: 42.5px;
}
#health_profile_ico {
float: left;
}
.long {
height: 180px;
width: 450px;
background-color: #0288d1;
display: inline-block;
}
.short {
height: 180px;
width: 225px;
background-color: #03a9f4;
margin-left: 20px;
display: inline-block;
}

<div id="content">
<div class="long">
<object class="icon" id="health_profile_ico" type="image/svg+xml" data="images/health_profile_icon.svg" width="140px" height="140px" alt="health profile"></object>
<h2 id="health_profile_title">Health <br /> Profile</h2>
</div>
<div class="short">
<object class="icon" id="short_ico" type="image/svg+xml" data="images/chat_icon.svg" width="140px" height="140px" alt="chat"></object>
</div>
<div class="short">
<object class="icon" id="short_ico" type="image/svg+xml" data="images/nearby_place_icon.svg" width="140px" height="140px" alt="nearby locations finder"></object>
</div>
</div>
&#13;
请快速帮助我,因为我需要解决这个问题并完成项目 我使用photoshop生成了预期的结果,我很确定它们
答案 0 :(得分:1)
问题似乎是#short_ico
margin-right 属性的结果;所以在css中添加以下代码可以解决问题:
.short:nth-last-child(1) #short_ico {
margin-right: 0;
}