个人中心
gpt4 book ai didi

html - 文档中正确的 CSS 定位

转载 作者：行者123 更新时间：2023-11-28 19:01:53 25 4
gpt4 key购买 nike

我有一个 HTML 表单，里面有一个表格。代码如下:

我的代码:

    <html>
    <head></head>

    <body>
        <form onsubmit="" id="form1" action="" method="post" name="form1" style="position: relative; background-color: green;">
    <table style="width: 908px; background-color: yellow; position: absolute; left: 350px; top: 350px;" border="0">
        <tbody><tr>
            <td colspan="3" align="center"><span style="color: Red; font-size: medium;" id="error"><br></span></td>
        </tr><tr>
            <td style="width: 300px;" align="right"><input style="font-size: medium; width: 35%;" tabindex="-1" id="btnReset" onclick="" value="Reset" name="btnReset" type="button"></td><td style="width: 300px;" align="center"><img style="border-width: 0px;" src=""></td><td style="width: 300px;" align="left"><input style="font-size: medium; width: 35%;" id="btnNext" onclick="" value="Next" name="btnNext" type="submit"></td>
        </tr><tr>
            <td></td><td style="width: 34%;" align="center">For assistance please see <a href="">Help</a> page<br><br></td><td></td>
        </tr>
    </tbody>
</table>

    <input value="" id="StoredProcedure" name="StoredProcedure" type="hidden"><input value="False" id="SubmitFile" name="SubmitFile" type="hidden"><input value="False" id="" name="" type=""><input value="" id="" name="" type="hidden"><input value="False" id="" name="" type="hidden">

    </form>
    </body>
    </html>

我正在尝试让表格像 this 上给出的示例中的嵌入式标签那样移动教程网站。我尝试模拟的具体示例的代码如下:

示例代码:

<html>
<head>
<style type="text/css" media="screen">

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}


#example {
 float:right;
}

#example div {
}

#div-before, #div-after {
 background-color:#88d;
 color:#000;
}
#div-1 {
 width:400px;
 background-color:#000;
 color:#fff;
}
#div-1-padding {
 padding:10px;
}
#div-1a {
 background-color:#d33;
 color:#fff;
}
#div-1b {
 background-color:#3d3;
 color:#fff;
}
#div-1c {
 background-color:#33d;
 color:#fff;
}
#example div p {
 margin:0 .25em;
 padding:.25em 0;
}
#description {
 float:left;
 width:40%;
}
pre {
 padding:1em;
 border:1px dashed #aaa;
 background:#fafafa;
}
p {
 margin:0.5em 0;
}
h3 {
 color:#999;
}

.job {
margin-top:1em;
border:1px solid #aaa;
padding:1em;
background:#ddd;
}

</style>
</head>

<body>
<div id="example">

<div id="div-before">
<p>id = div-before</p>
</div>

<div id="div-1">
<div id="div-1-padding">

<p>id = div-1</p>

<div id="div-1a">
<p>id = div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>

<div id="div-1b">
<p>id = div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>

<div id="div-1c"><p>id = div-1c</p></div>

</div></div><!-- /id=div-1-padding /id=div-1 -->

<div id="div-after">
<p>id = div-after</p>
</div>

</div><!-- /id=example -->

</body>
</html>

为了描述我想要完成的事情，请注意当您调整浏览器的大小以使其变小时，示例代码 的主 div 及其子元素将如何随浏览器移动，但当它不再适合浏览器窗口时仍保持比例；而对于 My Code，即使我调整浏览器大小时，表单的子项(即内表)仍将保留在同一位置。我希望它像示例一样移动，我很困惑，因为我的直觉告诉我，由于表格嵌入在表单中，即使它绝对定位在表单中，它也应该移动，因为它仅相对于它的父元素定位，而不是浏览器窗口。有什么我想念的吗？

注意:

为了避免混淆，在我的代码中，我添加了背景色，仅供个人引用，可以忽略。

更新:

以下是每个页面的演示链接:EXAMPLE DEMO , MY CODE DEMO

更新(解决方案):好的，我能够解决它。我所做的是将整个表单包裹在一个 div 标签中，并赋予它以下样式: position: relative;背景色:绿色；宽度:910px；边距:0px 自动；。我还删除了表单样式并将表格样式更改为以下内容:width: 908px;背景色:黄色；position:absolute；左:0px；顶部:350 像素；。这会将所有内容移动到中心并反射(reflect)示例代码中描述的行为。这是修改后的代码以供将来引用。不过，我仍然很好奇，为什么将样式应用于表单时这不起作用？ div 和 form 标签之间的样式处理方式是否存在根本差异？？？感谢您的所有建议。

<html>
        <head></head>

        <body>
            <div style="position: relative; background-color: green; width: 610px; margin: 0px auto;">
            <form onsubmit="" id="form1" action="" method="post" name="form1">
        <table style="width: 908px; background-color: yellow; position: absolute; left: 0px; top: 350px;" border="0">
            <tbody><tr>
                <td colspan="3" align="center"><span style="color: Red; font-size: medium;" id="error"><br></span></td>
            </tr><tr>
                <td style="width: 300px;" align="right"><input style="font-size: medium; width: 35%;" tabindex="-1" id="btnReset" onclick="" value="Reset" name="btnReset" type="button"></td><td style="width: 300px;" align="center"><img style="border-width: 0px;" src=""></td><td style="width: 300px;" align="left"><input style="font-size: medium; width: 35%;" id="btnNext" onclick="" value="Next" name="btnNext" type="submit"></td>
            </tr><tr>
                <td></td><td style="width: 34%;" align="center">For assistance please see <a href="">Help</a> page<br><br></td><td></td>
            </tr>
        </tbody>
    </table>

        <input value="" id="StoredProcedure" name="StoredProcedure" type="hidden"><input value="False" id="SubmitFile" name="SubmitFile" type="hidden"><input value="False" id="" name="" type=""><input value="" id="" name="" type="hidden"><input value="False" id="" name="" type="hidden">

        </form>
            </div>
        </body>
        </html>

最佳答案

[...] since it's positioned relative to it's parent element only and not the browser window. Is there something I'm missing?

是的。

你会想要了解绝对定位:(来自 w3schools )

An absolute position element is positioned relative to the first parent element that has a position other than static.

所以一个绝对定位的元素不是相对于它的父元素定位的，而是第一个非静态定位的祖先元素。

什么是静态定位？ position CSS 属性有 4 个可能的值:

  • 静态
  • 亲戚
  • 绝对
  • 固定

静态是默认定位。所以第一个祖先元素的值为position除了 static(这是默认设置)之外，您的绝对定位元素会将自己定位在......不一定一定是父元素。

在您的代码中，您只需要添加一个 position:relative;到 <form>元素。你不需要包装 <form>在<div> .那太过分了。在您的最终解决方案中，没有任何 <div> <form> 正在做什么不能 - 它们都是 block 级元素。

关于html - 文档中正确的 CSS 定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5345292/

25 4 0
文章推荐： css - 如何在 html 元素上实现水平和垂直渐变
文章推荐： css - 创建多列表单
文章推荐： css 继承让我失望
文章推荐： jquery - Firefox 和 IE 处理 jQuery CSS 的方式有区别吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com