Question

请运行这段简短且非常基本的代码 (https://furatena.miami/grid_without_form)：

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html SYSTEM "http://furatena.miami/grid/dtd.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Style-Type" content="text/css" /><style type="text/css">@import url("https://furatena.miami/grid/css.css");</style><link rel="icon" href="https://furatena.miami/grid/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Cloth!!</title></head><body>

<div id="grid_container">


<div id="grid_nkb">
<input id="toggle-menu" class="" type="checkbox" />
<nav class="tc" id="mnutl"><a href="#">Register!</a>
<select name="g" onchange="this.form.submit();"><option value="en" class="pad03">English</option><option value="it" class="pad03">Italiane</option></select>
</nav>
<label for="toggle-menu"><span class="menu-icon"></span></label>
</div>


<div id="grid_info"><p>info</p></div>
<div id="grid_menu"><p>links</p></div>
</div>
<div id="pie">© furatena.miami</div></body></html>

您可以看到这是“圣格里尔”CSS 布局，运行“完美”并且代码 xHTML 1.1 100% 在 https://validator.w3.org 上有效

现在运行完全相同的代码但只添加<form>和</form>（https://furatena.miami/grid_with_form）：

grid with form

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html SYSTEM "http://furatena.miami/grid/dtd.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Style-Type" content="text/css" /><style type="text/css">@import url("https://furatena.miami/grid/css.css");</style><link rel="icon" href="https://furatena.miami/grid/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Cloth!!</title></head><body>

<div id="grid_container">

<form>
<div id="grid_nkb">
<input id="toggle-menu" class="" type="checkbox" />
<nav class="tc" id="mnutl"><a href="#">Register!</a>
<select name="g" onchange="this.form.submit();"><option value="en" class="pad03">English</option><option value="it" class="pad03">Italiane</option></select>
</nav>
<label for="toggle-menu"><span class="menu-icon"></span></label>
</div>
</form>

<div id="grid_info"><p>info</p></div>
<div id="grid_menu"><p>links</p></div>
</div>
<div id="pie">© furatena.miami</div></body></html>

继续作为代码 xHTML 1.1 100% 在 https://validator.w3.org 上有效但现在布局坏了

为什么 <form> </form> 会影响我的 CSS 网格布局？

添加其他 <div> 可以修复错误，但实际上不是逻辑需要更多标签/div 来修复错误。

修复错误的一些想法不添加更多标签并且不丢失toggle-menu？

请解释一下？

谢谢

为什么 <form> </form> 破坏了我的网格 CSS 设计？

0 个答案: