问题：

为什么我不能将“fieldset”标记用作flex父级的深层子级？

梅宏盛

2023-03-14

我选择CSS flex来布局我的页面，在下面的代码中，我发现了一些对我来说很有趣的东西。

 function textBoxToggle(textClass)
  {
      $(textClass).toggleClass("opened", "fast");
  }

*, *::after, *::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.w-100 {
    width: 100%;
}

.dFlex {
    flex: 1 1 auto;
    display:flex;
    flex-flow:row nowrap;
    position:relative;
    width:100%;
    min-height:100%;
    min-width: 0; /* this one right here does it!*/
}

.w-50 {
    width: 50%;
    border: 1px solid red;
    margin: 50px auto;
}

.textClass {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.textClass.opened {
    height: auto;
    overflow: auto;
    white-space: normal;
}

p.textClass {
    padding: 15px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="newStyle2.css">
</head>
<body>
    <div class="dFlex">
        <div class="w-100">
          <p class="textClass">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit delectus ullam earum quibusdam suscipit voluptatem, aliquam inventore cumque consequuntur laboriosam nesciunt doloribus tempora, labore vitae dignissimos architecto qui quo. Vel!
          </p>
        </div>
    </div>
    
        <div class="w-100 dFlex">
          <div class="w-50">
            <div class="w-100"> 
            <form action="">   
                
            <!-- <fieldset class="w-100">
                <legend class="">Test</legend> -->
                
                <p class="textClass" onclick="textBoxToggle(this);">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis accusantium voluptatem assumenda tenetur ullam voluptatibus quo quibusdam? Aut enim, pariatur officia sed labore repellat quae dignissimos deleniti illum est commodi?consectetur adipisicing elit. Reiciendis rem exercitationem alias!
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis rem exercitationem alias! Ducimus aspernatur quod error asperiores tenetur cumque explicabo voluptates obcaecati fugit temporibus, nobis ex dolorum nihil! Assumenda, error?
                </p> 

                    <label for="fname">First name:</label>
                    <input type="text" id="fname" name="fname"><br><br>
                    <label for="lname">Last name:</label>
                    <input type="text" id="lname" name="lname"><br><br>
                
            <!-- </fieldset> -->
        </form>
        </div>
            
          </div>
          <div class="w-50">
            Other content
          </div>
        </div>

  <script src="jquery-3.5.1.js"></script>
  <script src="javasc.js"></script>
      
</body>
</html>

如您所见，注释中有“fieldset”和“legend”标记。如果我删除他们的注释，我会看到布局变得不正确，左栏转到右栏的一侧，还有文本溢出：省略号在我的样式中不起作用。我知道空白：nowrap 是溢出的原因，但是根据这个问题，当我们设置min height:0时到我们的flex父级（就像我以前做的那样），它必须正常工作。我还读到一个问题，说在应用display:flex 到字段集标记。但这是过去的事了，现在浏览器在这方面没有问题了。我也没有使用display:flextofieldset直接标记，我在fieldset标记的父级中使用了它。那么问题是什么？为什么我不能在布局中使用fieldset标记？

这是当field dset标签没有注释时的情况：

  function textBoxToggle(textClass)
  {
      $(textClass).toggleClass("opened", "fast");
  }

css prettyprint-override">*, *::after, *::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.w-100 {
    width: 100%;
}

.dFlex {
    flex: 1 1 auto;
    display:flex;
    flex-flow:row nowrap;
    position:relative;
    width:100%;
    min-height:100%;
    min-width: 0; /* this one right here does it!*/
}

.w-50 {
    width: 50%;
    border: 1px solid red;
    margin: 50px auto;
}

.textClass {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.textClass.opened {
    height: auto;
    overflow: auto;
    white-space: normal;
}

p.textClass {
    padding: 15px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="newStyle2.css">
</head>
<body>
    <div class="dFlex">
        <div class="w-100">
          <p class="textClass">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit delectus ullam earum quibusdam suscipit voluptatem, aliquam inventore cumque consequuntur laboriosam nesciunt doloribus tempora, labore vitae dignissimos architecto qui quo. Vel!
          </p>
        </div>
    </div>
    
        <div class="w-100 dFlex">
          <div class="w-50">
            <div class="w-100"> 
            <form action="">   
                
            <fieldset class="w-100">
                <legend class="">Test</legend>
                
                <p class="textClass" onclick="textBoxToggle(this);">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis accusantium voluptatem assumenda tenetur ullam voluptatibus quo quibusdam? Aut enim, pariatur officia sed labore repellat quae dignissimos deleniti illum est commodi?consectetur adipisicing elit. Reiciendis rem exercitationem alias!
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis rem exercitationem alias! Ducimus aspernatur quod error asperiores tenetur cumque explicabo voluptates obcaecati fugit temporibus, nobis ex dolorum nihil! Assumenda, error?
                </p> 

                    <label for="fname">First name:</label>
                    <input type="text" id="fname" name="fname"><br><br>
                    <label for="lname">Last name:</label>
                    <input type="text" id="lname" name="lname"><br><br>
                
            </fieldset>
        </form>
        </div>
            
          </div>
          <div class="w-50">
            Other content
          </div>
        </div>

  <script src="jquery-3.5.1.js"></script>
  <script src="javasc.js"></script>
      
</body>
</html>

共有1个答案

段干博明

2023-03-14

灵活的祖先是无关紧要的。没有它也可以观察到类似的行为。

默认情况下，字段集元素被定义为具有min inline size:min content。

关闭该选项，例如使用mininlinesize:0或minwidth:0，字段集行为正常

function textBoxToggle(textClass)
  {
      $(textClass).toggleClass("opened", "fast");
  }

*, *::after, *::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.w-100 {
    width: 100%;
}

.dFlex {
    flex: 1 1 auto;
    display:flex;
    flex-flow:row nowrap;
    position:relative;
    width:100%;
    min-height:100%;
    min-width: 0; /* this one right here does it!*/
}

.w-50 {
    width: 50%;
    border: 1px solid red;
    margin: 50px auto;
}

.textClass {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.textClass.opened {
    height: auto;
    overflow: auto;
    white-space: normal;
}

p.textClass {
    padding: 15px 0;
}

fieldset {
  min-inline-size: 0;
  /* or min-width: 0; */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="newStyle2.css">
</head>
<body>
    <div class="dFlex">
        <div class="w-100">
          <p class="textClass">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit delectus ullam earum quibusdam suscipit voluptatem, aliquam inventore cumque consequuntur laboriosam nesciunt doloribus tempora, labore vitae dignissimos architecto qui quo. Vel!
          </p>
        </div>
    </div>
    
        <div class="w-100 dFlex">
          <div class="w-50">
            <div class="w-100"> 
            <form action="">   
                
            <fieldset class="w-100">
                <legend class="">Test</legend>
                
                <p class="textClass" onclick="textBoxToggle(this);">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis accusantium voluptatem assumenda tenetur ullam voluptatibus quo quibusdam? Aut enim, pariatur officia sed labore repellat quae dignissimos deleniti illum est commodi?consectetur adipisicing elit. Reiciendis rem exercitationem alias!
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis rem exercitationem alias! Ducimus aspernatur quod error asperiores tenetur cumque explicabo voluptates obcaecati fugit temporibus, nobis ex dolorum nihil! Assumenda, error?
                </p> 

                    <label for="fname">First name:</label>
                    <input type="text" id="fname" name="fname"><br><br>
                    <label for="lname">Last name:</label>
                    <input type="text" id="lname" name="lname"><br><br>
                
            </fieldset>
        </form>
        </div>
            
          </div>
          <div class="w-50">
            Other content
          </div>
        </div>

  <script src="jquery-3.5.1.js"></script>
  <script src="javasc.js"></script>
      
</body>
</html>

类似资料：

为什么我不能在Javadoc中使用标记？

我试图使用Java8Javadoc工具，但它抱怨是一个未知标记：我看到有一些方法可以禁用doclint，但我真的想知道哪些标签列表被支持（或者为什么这个不支持）。更多信息在这个问题，这个问题和从这个博文。
不能删除父级和子级

我有两个实体使用Spring和Hibernate
为什么我的测试不能从它的父级继承它的ContextConfiguration位置？

为了便于DRY，我希望在父类中定义ContextConfiguration并让所有测试类继承它，如下所示：父类：子类：根据ContextConfiguration文档，我应该能够继承父级的位置，但我不能让它工作。Spring仍然在默认位置()中查找文件，如果找不到，则会查找barfs。我尝试了以下方法，但没有成功：使父类具体化向父类添加无操作测试同时向父类添加注入成员以上组合我使用
为什么我们不能将顶级类定义为私有类？

问题内容：为什么Java不允许将顶级类声明为私有？除了“我们无法访问私人课程”之外，还有其他原因吗？问题答案：顶级类作为私有类是完全没有用的，因为没有人可以访问它。
PHP分层数组-父级和子级

问题内容：我将PHP和mySQL与Idiorm结合使用。那可能不相关。我的PHP数组这是父母与子女之间的关系。 0是根父级。示例：根父级0有孩子33，孩子33有孩子27，孩子27有孩子71。如果需要解决此问题，可以更改此数组结构。我的分层结果像这样，但作为一个数组… 信息深度未知，可以无限。我尝试了foreach，但可能不是这样。我自己的想法一些递归功能？一些while循环？
为什么析构函数不能标记为constexpr？

在C中，您可以将许多内容声明为：变量、函数（包括成员函数和运算符）、构造函数，以及从C 1z开始的语句和lambda表达式。但是，声明析构函数会导致错误：我的问题：为什么不能将析构函数标记为constexpr 如果我没有提供析构函数，那么隐式生成的析构函数是constexpr吗如果我声明一个默认析构函数（

为什么我不能将“fieldset”标记用作flex父级的深层子级？

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档