我在删除Div之间的空格时遇到问题。我的html有一个DIV-container1 IMG-image DIV-container2，我想要对齐所有3个东西，两者之间没有任何空格。请看小提琴并为我提供解决方案。 点击here `
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>gamehistorylotto</title>
<link rel="stylesheet" type="text/css" href="css/login_screen.css" />
<link rel="stylesheet" type="text/css" href="css/common/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/common/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" style="background: url(images/bkg.png) no-repeat center center fixed; background-size: cover">
<div data-role="header" id="titleHeader" data-position="fixed">
<img src="images/b_retour_on_euro.png" onclick="history.go(-1); return true;" class="ui-btn-left">
<h1>MES JEUX ET GAINS</h1>
<img src="images/logout_euro_off.png" class="ui-btn-right">
</div>
<div id="totalAmtSection" >
<label id="connectLbl">Connecte</label>
</div>
<div data-role="content">
<div id="container1">
<label data-role="none" id="date">Date : </label>
<label data-role="none" id="hour">Heure : </label><br>
<label data-role="none" id="serialno">Serial No : </label><br>
<label data-role="none" id="receiptno">Receipt No : </label><br>
<label data-role="none" id="game">Game : </label><br>
<label data-role="none" id="price">Price : </label><br>
<label data-role="none" id="subscription">Subscription : </label><br>
<label data-role="none" id="draws">Draws : </label>
</div>
<img src="images/overlay_divider_horizontal.png" id="splitter" />
<div id="container2">
<label data-role="none" id="whiteboxlbl">Played numbers:</label><br><br>
<div id="whiteboxcontainer">
<center><label data-role="none" id="ltnumber"></label>
<label data-role="none" id="super6">Super 6 : </label><br>
<label data-role="none" id="spiel77">Spiel 77 : </label><br>
<label data-role="none" id="superzahl">Superzahl : </label><br></center>
</div>
</div>
</div>
<style type="text/css">
#splitter{
height:7px;
margin:0;
width:100%;
display:inline;
}
#whiteboxlbl{
font-size:16px;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}
#date{
font-size:16px;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}
#hour{
font-size:16px;
margin-left:5%;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}
#serialno{
left:15%;
font-size:16px;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}
#receiptno{
font-size:16px;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}
#game{
font-size:16px;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}
#price{
font-size:16px;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}
#subscription{
font-size:16px;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}
#draws{
font-size:16px;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}
#container1{
display:block;
margin-top:10%;
padding-right:5%;
padding-left:5%;
padding-bottom:5%;
padding-top:5%;
background: transparent -moz-linear-gradient(
top,
#37b6d2 0%,
#4398bf);
background: transparent -webkit-gradient(
linear, left top, left bottom,
from(#37b6d2),
to(#4398bf));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #55b2be;
}
#container2{
display:block;
margin:0;
padding:0;
padding-right:5%;
padding-left:5%;
padding-bottom:5%;
padding-top:5%;
background: transparent -moz-linear-gradient(
top,
#37b6d2 0%,
#4398bf);
background: transparent -webkit-gradient(
linear, left top, left bottom,
from(#37b6d2),
to(#4398bf));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #55b2be;
}
#whiteboxcontainer{
top:0;
padding-top:5%;
padding-bottom:5%;
height:100%;
width:100%;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#ffffff 25%,
#ffffff 50%,
#ffffff 90%,
#dadce8);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
color-stop(0.25, #ffffff),
color-stop(0.50, #ffffff),
color-stop(0.90, #ffffff),
to(#dadce8));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #000000;
-moz-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(0,0,0,1);
-webkit-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(0,0,0,1);
box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(0,0,0,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
#totalAmtSection
{
height:25px;
width:100%;
top:37px;
position:absolute;
padding:0px !important;
margin:0px !important;
color:white;
font-size:11px;
background:url('images/bg_loggedin_1px.png') repeat;
}
#connectLbl
{
float:left;margin-left:1%;padding:6px;
}
#portLbl
{
float:right;margin-right:1%;padding:6px;
}
.ui-btn-left {
height: 80%;
margin:5%;
float: left;
}
.ui-btn-right {
height: 80%;
margin:5%;
float: right;
}
</style>
<script type="text/javascript">
var historyArray=["316-54568709-02316","31000016","13,15","1","Saturday"];
function dynamichistory(){
var content;
var arraynumber;
for(j=0;j<historyArray.length;j++)
{
content=historyArray[j];
arraynumber=j;
if(arraynumber==0)
{
$("#serialno").append(content);
}
else if(arraynumber==1)
{
$("#receiptno").append(content);
}
else if (arraynumber==2)
{
$("#price").append(content+'€');
}
else if (arraynumber==3)
{
$("#subscription").append(content+' week(s)');
}
else
{
$("#draws").append(content);
}
}
}
dynamichistory();
var date=new Date();
var ftdate=(date.getDate() + '/' + (date.getMonth()+ 1) + '/' + date.getFullYear());
$("#date").append(ftdate);
var hour=new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
$("#hour").append(hour);
a=12;
var numberArray = ["11","12","13","22","07","45"];
for(i=1; i<=a; i++){
function dynamicrows(){
var content = '<table>'
content='<center>'
content += '<tr><td>';
for(j=0;j<numberArray.length;j++)
{
content += numberArray[j] ;
if(j!=(numberArray.length-1))
{
content+='-'
}
content += '</label>'
}
content += '</td></tr>'
content += '</center>'
content += '</table>'
$("#ltnumber").append(content);
}
dynamicrows();
}
var superArray = ["1","2","3","4","5","6"];
var superFlag="yes";
superNumber=1;
for(i=1; i==superNumber; i++){
function superdynamic(){
var content='<label id="superNumber" class="inline superNumber" >';
if(superFlag=="yes")
{
for(j=0;j<superArray.length;j++)
{
content += superArray[j] ;
content += '</label>'
}
$("#super6").append(content+ ' : OUI');
}
else
{
for(j=0;j<superArray.length;j++)
{
content += superArray[j] ;
content += '</label>'
}
$("#super6").append(content+ ' : NON');
}
}
superdynamic();
}
var spielArray = ["1","2","3","4","5","6","7"];
var spielFlag="no";
spielNumber=1;
for(i=1; i==spielNumber; i++){
function spieldynamic(){
var content='<label id="spielNumber" class="inline spielNumber" >';
if(spielFlag=="yes")
{
for(j=0;j<spielArray.length;j++)
{
content += spielArray[j] ;
content += '</label>'
}
$("#spiel77").append(content+ ' : OUI');
}
else
{
for(j=0;j<spielArray.length;j++)
{
content += spielArray[j] ;
content += '</label>'
}
$("#spiel77").append(content+ ' : NON');
}
}
spieldynamic();
}
var superzahlNumber=["3"];
function superzahldynamic(){
var content='<label id="superzahlNumber" class="inline superzahlNumber" >';
for(i=0; i<superzahlNumber.length; i++)
{
content += superzahlNumber[i] ;
content += '</label>'
}
$("#superzahl").append(content);
}
superzahldynamic();
var total=["100.5"]
function totaldynamic(){
var content='<label id="totalamount" class="inline totalamount" >';
for(i=0; i<total.length; i++)
{
content += total[i] + '€';
content += '</label>'
}
$("#total").append(content);
}
totaldynamic();
var portfolieAmount = "100.50€";
var portLbl = $("<label>", {id: "portLbl"}).text("Portefeuille : " + portfolieAmount);
$("#totalAmtSection").append(portLbl);
</script>
</div>
</body>
`
答案 0 :(得分：3)
删除margin代码的line-height和p：
p{
margin: 0px;
line-height: 0px;
}
说实话，我不知道你为什么在那里使用p标签。只需删除它并自行放置img。
答案 1 :(得分：1)
您有一个<p>元素，导致两个<div>元素之间存在空间。像这样改变：
<p style="margin: 0;"><img src="images/overlay_divider_horizontal.png" id="splitter"></p>
答案 2 :(得分：0)
你可以：