Question

为什么我的写入和检查状态按钮不会与两个div的水平对齐

我希望id为writeMe的按钮位于带有id test的div的右侧然后我希望按钮statusCheck位于id状态为1的div的右侧，但由于某种原因，即使display:inline，它仍然位于其下方

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1,           maximum-scale=1, 
minimum-scale=1, width=device-width, height=device-height,    target-
densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/bluetoothSerial.js"></script>
<script type="text/javascript" src="ECMA.js"></script>

<title> My LCD code </title>
</head>
<body onload="app.initialize();"> 
<p>Welcome to the LCD software</p>

    <select id="list" onchange= "app.prints(address,list.
    options[list.selectedIndex].value);">
    </select>
    <button id="connect" onclick="app.connect();">
        Connect
    </button>
<div id="address">
    macAddress
</div>


<div id="status1">
    Not Connected
</div>
<button id="statusCheck"> Click to check status </button>
<div id="test" >
    No Message Recieved
</div>

<button id="writeMe" onclick="app.bluetoothWrite();">
 write
</button>

CSS

body
{
background-color:white;
}


select {
width:200px;
margin:30px;
margin-left:0px;
}

#connect {
display:inline;
margin-left:0px;
width:200px;
}



#status1 {
border:2px solid black;
width:200px;
height:20px;
margin:30px;
margin-top:0px;
margin-left:0px;


}
#address {
    display:inline;
    width:200px;
    height:20px;
    bordrr:2px solid black;
}



#statusCheck {
    display:inline;
    width:200px;
    margin:30px;
    margin-bottom:0px;

}

#test {
width:200px;
height:20px;
border:2px solid black;


}

#writeMe {
width: 200px;
display: inline;

}

Answer 1

试试这个HTML

<p>Welcome to the LCD software</p>

    <select id="list" onchange= "app.prints(address,list.
    options[list.selectedIndex].value);">
    </select>
    <button id="connect" onclick="app.connect();">
        Connect
    </button>
<div id="address">
    macAddress
</div>

<div>
<span id="status1">
    Not Connected
</span>
 <button id="statusCheck"> Click to check status </button>
</div> 

<div>
<span id="test" >
    No Message Recieved
</span>  
<button id="writeMe" onclick="app.bluetoothWrite();">
 write
</button>
</div>

小提琴

http://jsfiddle.net/PFVxK/1323/

显示对齐问题将无法正确对齐

1 个答案: