gpt4 book ai didi

CSS 定位 : A row of floating left, 后面跟着一个 block

转载 作者:太空宇宙 更新时间:2023-11-03 20:19:26 25 4
gpt4 key购买 nike

我想要一排从左到右的方 block ,然后是下面的方 block 。

这是一张我希望在浏览器中呈现的图片。 Desired rendering of HTML

我需要通过 CSS 进行所有定位,而不是通过表格。这是我的 HTML 和我的 CSS...

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="demo.css" /><head>

<body>

<form action="">
<fieldset>
<legend>Field set A</legend>
<label for="password">Password
<input id="password" name="password" type="text" value="my password" />
</label>
</fieldset>
<fieldset class="radio">
<legend>Chaining mode</legend>
<label for="chain-cfb">
<input id="chain-cfb" name="chain" type="radio" />CFB
</label>
<label for="chain-cbc">
<input id="chain-cbc" name="chain" type="radio" />CBC
</label>
</fieldset>
</form>

<hr />
<p style="padding-top: 1em;">Some text underneath</p>
</body>
</html>

...这里是demo.css的内容...

fieldset
{
float: left;
display: block;
width: 17em;
margin: 0 1em 1em 0;
padding: 0 1em 1em 1em;
}

fieldset.radio input
{
clear: both;
float: left;
width: auto;
}

input
{
display: block;
width: 15em;
}

label
{
display: block;
margin-bottom: 1em;
font-weight: bold;
}

label.first
{
padding-top: 1em;
}

我读它的方式,应该是用这段代码得到想要的结果。但我不是。这是呈现的内容......

Actual rending of HTML

我需要对我的 html/css 进行哪些更改才能获得预期的结果?

最佳答案

一种不清除的方式是:

form { overflow: hidden; }

我通常创建一个名为 floatbox 的类,并在每个包含 float 元素的容器上使用它

.floatbox { overflow: hidden; }

然后匹配的html是

<form class="floatbox" action="">
<fieldset><p>I'm floating</p></fieldset>
<fieldset><p>me too</p></fieldset>
</form>

关于CSS 定位 : A row of floating left, 后面跟着一个 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13625875/

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