0

書き込みとチェックのステータス ボタンが 2 つの div と水平方向に整列しないのはなぜですか

ID writeMe のボタンを id test の div のすぐ右に配置してから、statusCheck ボタンを id status 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;

}
4

1 に答える 1