How come my write and check status buttons won't align horizontally with the two divs?
I am trying to position the button with id "writeMe" directly to the right of the div with id "test", and then I want the button "statusCheck" to be positioned directly to the right of the div with id "status1". However, even with the CSS property display:inline, it still remains below the div.
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 Received
</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;
}