我正在创建一个控制机器人的 html 页面，我正在努力使布局美观。
目前有一个实时视频源，其下方有一列 8 个按钮。这些按钮具有 CSS 属性，当它们被点击时会改变它们的颜色等。我只是希望能够移动按钮以将它们排列在一个网格或一组列中。
我该怎么做？我是否需要使用 CSS 来创建一些列，还是因为我定位的是按钮而不是文本而更加困难？
当前的 HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" />
<title>WebIOPi | Demo</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
webiopi().ready(function() {
var content, button;
content = $("#content");
// create a "FORWARDS" labeled button for GPIO 7
button = webiopi().createGPIOButton(7, "FORWARDS");
content.append(button); // append button to content div
// create a "REVERSE" labeled button for GPIO 8
button = webiopi().createGPIOButton(8, "REVERSE");
content.append(button); // append button to content div
// create a "STEER LEFT" labeled button for GPIO 24
button = webiopi().createGPIOButton(9, "STEER LEFT");
content.append(button); // append button to content div
// create a "STEER RIGHT" labeled button for GPIO 24
button = webiopi().createGPIOButton(10, "STEER RIGHT");
content.append(button); // append button to content div
// create a "ROTATE LEFT" labeled button for GPIO 24
button = webiopi().createGPIOButton(11, "ROTATE LEFT");
content.append(button); // append button to content div
// create a "ROTATE RIGHT" labeled button for GPIO 24
button = webiopi().createGPIOButton(23, "ROTATE RIGHT");
content.append(button); // append button to content div
// create a "SHIFT UP" labeled button for GPIO 24
button = webiopi().createGPIOButton(24, "SHIFT UP");
content.append(button); // append button to content div
// create a "SHIFT DOWN" labeled button for GPIO 25
button = webiopi().createGPIOButton(25, "SHIFT DOWN");
content.append(button); // append button to content div
});
</script>
<style type="text/css">
button {
display: block;
margin: 5px 5px 5px 5px;
width: 200px;
height: 45px;
font-size: 16pt;
font-weight: bold;
color: black;
}
input[type="range"] {
display: block;
width: 160px;
height: 45px;
}
#gpio7.LOW {
background-color: White;
}
#gpio7.HIGH {
background-color: Green;
}
#gpio8.LOW {
background-color: White;
}
#gpio8.HIGH {
background-color: Red;
}
#gpio9.LOW {
background-color: White;
}
#gpio9.HIGH {
background-color: Green;
}
#gpio10.LOW {
background-color: White;
}
#gpio10.HIGH {
background-color: Green;
}
#gpio11.LOW {
background-color: White;
}
#gpio11.HIGH {
background-color: Yellow;
}
#gpio23.LOW {
background-color: White;
}
#gpio23.HIGH {
background-color: Yellow;
}
#gpio24.LOW {
background-color: White;
}
#gpio24.HIGH {
background-color: Blue;
}
#gpio25.LOW {
background-color: White;
}
#gpio25.HIGH {
background-color: Blue;
}
</style>
</head>
<body>
<div style="text-align:center;"><img src="http://192.168.0.14:8080/?action=stream" width="640" height="480"></div>
<div style="text-align:center;"><img src="http://goo.gl/S0jnL" width="200" height="200"></div>
<div id="content" align="center"></div>
</body>
</html>
最佳答案
我添加了 float:Left;到 CSS，按钮现在水平对齐:
#controls button {
display: block;
margin: 20px 20px 20px 20px;
width: 60px;
height: 20px;
font-size: 8pt;
font-weight: bold;
color: white;
float:left;
我的应用程序与您的应用程序类似...边框周围带有 GPIO 按钮的实时视频。我不是专家，只是分享我的发现。我希望这有助于...
关于css 按列排列按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14469466/