gpt4 book ai didi

css - HTML DIV 按钮定位

转载 作者:行者123 更新时间:2023-11-28 11:52:29 24 4
gpt4 key购买 nike

我正在尝试完成一些简单的事情,但令人惊讶的是需要一段时间才能弄明白。我对 HTML/CSS/JSP 很陌生。我想要做的就是在屏幕左侧创建一个 div 以包含 8 个按钮,并在页面右侧创建一个 div 以包含另外 8 个按钮。

<%!int buttonWidth=250;
int buttonHeight=75;%>

<style type="text/css">
.button {color:blue;
font-size: large;
width:<%=(buttonWidth+"px")%>;
height:<%=(buttonHeight+"px")%>}

#TVs {top:0px;
left: 0px;
width: <%=(buttonWidth*2+"px")%>;
height: <%=(buttonHeight*8)+"px"%>;
postion: absolute;
border: 2px solid green}

#Sources {top:0;
left: <%=(buttonWidth*3+"px")%>;
width: <%=(buttonWidth*2+"px")%>;
height: <%=(buttonHeight*8)+"px"%>;
postion: absolute;
border: 2px solid red}
</style>
</head>


<body>
<h2>Poseidon TV Control</h2>
<hr/>

<div id="TVs">
<button id="TV1" class="button">TV1</button>
<button id="TV2" class="button">TV2</button>
</div>

<div id="Sources">
<button id="DISH1" class="button">DISH1</button>
<button id="DISH2" class="button">DISH2</button>
</div>

div 容器出现在彼此的顶部,都在屏幕的左侧对齐。这让我感到困惑,因为所有其他样式元素都在工作(边框颜色、宽度等)。我觉得有一个简单的修复方法,所以如果有人可以帮助这个初学者,我将不胜感激。谢谢。

最佳答案

如果您对 div 使用 Float 会简单得多(您需要确保在完成后清除 float ):

<%!int buttonWidth=250;
int buttonHeight=75;%>

<style type="text/css">
.button {color:blue;
font-size: large;
width:<%=(buttonWidth+"px")%>;
height:<%=(buttonHeight+"px")%>}

#TVs {
width: <%=(buttonWidth*2+"px")%>;
height: <%=(buttonHeight*8)+"px"%>;
border: 2px solid green};
float:left;

#Sources {
width: <%=(buttonWidth*2+"px")%>;
height: <%=(buttonHeight*8)+"px"%>;
float:left;
margin-left:<%=(buttonWidth*3+"px")%>;
border: 2px solid red}
</style>
</head>


<body>
<h2>Poseidon TV Control</h2>
<hr/>

<div id="TVs">
<button id="TV1" class="button">TV1</button>
<button id="TV2" class="button">TV2</button>
</div>

<div id="Sources">
<button id="DISH1" class="button">DISH1</button>
<button id="DISH2" class="button">DISH2</button>
</div>

关于css - HTML DIV 按钮定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20256180/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com