当前位置: 首页 > 知识库问答 >
问题:

缺少分区边界

苏鸿志
2023-03-14

我需要你的帮助,

似乎我在尝试在容器div内的textarea周围添加div以及包含容器div底部按钮的div边框时遇到了一些困难。

第一个问题:右侧边框丢失

第二个问题,inner2 div缺少1px纯红。

以下是问题和期望结果的图片:

预期结果是:

这里是超文本标记语言

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
#container {
    text-align: center;
    width: 500px;
    border: 1px solid green;

}
#summary {
    width: 100%;
    height:100%; 
    border: 0;
}

#inner1 {
    height: 500px;
}

#inner2 {
    border-top: 1px solid red;
    width: 100%;
}
</style>


</head>

<body>

<div id="container">


        <div id='inner1'><textarea id="summary"></textarea></div>


    <div id="inner2"><input type="button" value="Close"></div>

</div>
</body>

</html>

共有2个答案

诸葛煜
2023-03-14

添加溢出:隐藏框大小:边框框 如下所示:

#container {
    text-align: center;
    width: 500px;
    border: 1px solid green;

}
#summary {
    width: 100%;
    height:100%; 
    border: 0;
    box-sizing: border-box;
}

#inner1 {
    height: 500px;
    overflow: hidden;
}

#inner2 {
    border-top: 1px solid red;
    width: 100%;
}

薄腾
2023-03-14

这是因为文本区域元素具有默认填充。由于填充不包括在元素的宽度/高度计算中,它会溢出父元素之外,因为边框的宽度100%大于父元素的宽度。

您可以删除此填充,也可以通过向textarea元素添加box size:border box将填充包含在尺寸计算中:

#summary {
    width: 100%;
    height: 100%;
    border: 0;
    box-sizing: border-box;
}
 类似资料:
  • 以下是缺少值的区域图的示例 我们已经在Google Charts Configuration Syntax一章中看到了用于绘制图表的配置 。 现在,让我们看一个缺少值的区域图的示例。 例子 (Example) HelloWorld.java package com.wenjiangs.client; import com.google.gwt.core.client.EntryPoint; imp

  • 以下是缺少值的区域图的示例。 我们已经在Highcharts Configuration Syntax一章中看到了用于绘制图表的配置 。 现在,让我们看一个缺少值的区域图的示例。 我们在图表中添加了spacingBottom属性。 图表 将图表的spacingBottom配置为30.它表示图表底边与内容之间的空间(绘图区域,轴标题和顶部位置的标题,标题,副标题或图例)。 chart.setSpac

  • 以下是使用范围和线的区域图的示例。 我们已经在Highcharts Configuration Syntax一章中看到了用于绘制图表的配置 。 现在,我们将看到使用范围和线的区域图的示例。 此外,我们还将看到其他配置。 我们在图表中更改了type属性。 系列 (series) 将图表类型配置为'arearange' 。 chart.type决定图表的系列类型。 这里,默认值是“line”。 var

  • 以下是缺少值的区域图的示例。 我们已经在Highcharts Configuration Syntax一章中看到了用于绘制图表的配置 。 现在,让我们看一个缺少值的区域图的示例。 我们在图表中添加了spacingBottom属性。 图表 将图表的spacingBottom配置为30.它表示图表底边与内容之间的空间(绘图区域,轴标题和顶部位置的标题,标题,副标题或图例)。 var chart = {

  • 谢谢你过来。 我想使用fetch api发送一个作为请求的 手术看起来像这样 这里的问题是边界,比如 永远不要将其放入标题中 应该是这样的 当您使用尝试“相同”操作时,如下所示 标题设置正确 所以我的问题是, > 在这种情况下,我如何使的行为完全像? 如果这不可能,为什么? 谢谢大家!这个社区或多或少是我职业成功的原因。

  • 下面给出依赖关系树。堆栈超过流要求放更多的文本。