- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我有一个分屏 HTML 页面。水平 flex 布局中有三个 DIV,左右两个 Pane 用于显示内容。左 Pane 中的按钮栏设置为 100% 宽度,但它溢出了父元素。这可能是什么原因造成的?
这是 innerHTML 的转储
body {
padding: 0px;
margin: 0px;
background-color: rgb(200, 210, 80);
font-family: 'Droid Sans', sans-serif;
}
.colsplit {
height: 12px;
width: 100%;
background-color: white;
background-image: url("http://www.vitacoll.co.uk/assets/images/splitterv.png");
background-repeat: no-repeat;
background-position: center;
cursor: ns-resize;
}
.rowsplit {
height: 100%;
width: 12px;
background-color: white;
background-image: url("http://www.vitacoll.co.uk/assets/images/splitterh.png");
background-repeat: no-repeat;
background-position: center;
cursor: ew-resize;
}
.top {
overflow: auto;
}
.treeul {
list-style: none;
user-select: none;
-moz-user-select: none;
}
.treeli {
margin: 3px;
list-style-type: none;
}
.treeli span:first-of-type {
user-select: none;
font-weight: bold;
cursor: pointer;
}
.folderselected {
background-color: blue;
color: white;
}
.fileselected {
margin: 3px;
background-color: blue;
color: green;
}
.loading {
z-index: 100;
position: fixed;
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 1);
cursor: wait;
}
.blankout {
opacity: 0;
z-index: -10;
position: fixed;
display: flex;
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.6);
justify-content: center;
align-items: center;
}
.square {
padding: 15px;
background-color: rgb(232, 123, 4);
border: 1px solid;
}
.square p {
display: flex;
}
.square label {
flex-basis: 30%;
text-align: right;
padding: 5px;
}
.tabselected {
-moz-user-select: none;
background-color: #b3c3dd;
color: white;
flex-basis: auto;
padding: 5px;
border-radius: 8px 8px 0px 0px;
}
.tabnormal {
-moz-user-select: none;
background-color: #37588e;
color: white;
flex-basis: auto;
padding: 5px;
border-radius: 8px 8px 0px 0px;
}
#category_props {}
#category_items {
display: none;
}
#rightpane {
display: flex;
flex-direction: column;
}
#content {
background-color: #b3c3dd;
}
#tabs {
display: flex;
flex-direction: row;
width: 100%;
margin: 7px 7px 0px 7px;
}
#treepane {
width: 100%;
display: flex;
flex-direction: column;
}
#treemenubuttonbar {
border: 3px solid;
padding: 10px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
#treemenubuttonbar button {
display: block;
flex-base: auto;
}
#treecontroller {
width: 100%;
flex-base: auto;
overflow: auto;
}
#split1 {
padding: 0px;
border: 0px;
position: absolute;
width: 100%;
height: 100%;
}
<div id="split1" style="display: flex; flex-direction: row;">
<div id="treepane" style="display: flex; flex-basis: 406px;">
<div id="treemenubuttonbar">
<button id="buttonadd">add</button><button id="buttondelete">delete</button>
<button id="buttonrefresh">refresh</button>
</div>
<div id="treecontroller">
<ul class="treeul">
<li class="treeli" data-id="1">
<div data-closed="true"><span>[+]</span><span>root</span></div>
<ul style="display: none;">
<li class="treeli" data-id="2">Vitamins</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="rowsplit" data-before="0" data-after="1"></div>
<div id="rightpane" style="display: flex; flex-basis: 948px;">
<div id="tabs">
<div data-id="1" class="tabselected">Category Properties</div>
<div data-id="2" class="tabnormal">Category Products</div>
</div>
<div id="category_props" style="display:none">
<form id="categorypropform">
<input name="base" type="hidden">
<p><label for="title2">Catergory Title:</label><input name="title2" required="" minlength="1" maxlength="50" type="text"></p>
<p><label for="shortname2">Shortname:</label><input name="shortname2" required="" minlength="1" maxlength="10" type="text"></p>
<p><button name="create2">Create</button></p>
<p><button name="cancel2">Cancel</button></p>
</form>
</div>
<div id="category_items"></div>
</div>
</div>
<div id="newcategory" class="blankout">
<div class="square">
<form id="newcategoryform">
<input name="base" value="" type="hidden">
<p><label for="title">Catergory Title:</label><input name="title" required="" minlength="1" maxlength="50" type="text"></p>
<p><label for="shortname">Shortname:</label><input name="shortname" required="" minlength="1" maxlength="10" type="text"></p>
<p><button name="create">Create</button></p>
<p><button name="cancel">Cancel</button></p>
</form>
</div>
</div>
最佳答案
您的按钮由于其填充而被推过。
2 个选项:
删除填充。
将 box-sizing: border-box;
添加到您的按钮容器。
关于html - DIV 元素脱离父元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51429682/
我正在尝试创建一个函数,以便您可以循环遍历一个包含很多对象的大对象,并按值找到特定的方法。我想在使用break语句找到值时停止函数中的循环。这是我的代码。 let fake_window = {
所以,我有以下代码: var name = prompt("What's your name?"); var greeting = "Hello " + name + " :D"; console.
有时,即使是最简单的事情也似乎是不可能的……看看这个,如果您明白我没有看到的东西。 >> LINK 一个 div(绿色),使用类分为两侧 L 和 R。 出于某种原因,类“left-content,ri
许多框架试图从 HTML(自定义标签、JSF 组件系统)中抽象出来,以便更轻松地处理特定的鱼缸。 你们有没有使用过将类似概念应用于 CSS 的东西?可以为您带来一系列跨浏览器魔法的东西,支持类似变量(
我有一个版本历史记录,我正在尝试在其上运行 gradle 构建,并在我的 bash 脚本中运行 while read -r version do git checkout $version
这个问题在这里已经有了答案: Android & RoboGuice - Inject views on Fragment? (1 个回答) 关闭 8 年前。 我有一个 roboactivity,我
我的问题是是否有一个 rails 等同于“脱离” Controller 操作,例如 def new if some_confirmation do_stuff
我厌倦了 此客户端太旧,无法使用工作副本 每当我在使用比石器时代更新的 svn 客户端修复我的工作副本后回到 Eclipse 时。 有没有办法让 Subclipse 使用当前的 Subversion
代码笔示例:http://codepen.io/mattrice/full/peXeqd/ 我想要的是 SVG 完全包含在父级的给定宽度内(本例为 6 列,但可以是任何其他任意宽度的网格元素)。 此示
我正在构建一个带有 TextView、ScrollView 和 LinearLayout 的 Android 应用程序,我想使用 Java 将一个 TextView 和一个 ImageView 添加到
我想在进行一些测试后分析我的 iPhone 应用程序中的数据,这些数据位于 SQLite 数据库中。有什么办法可以将它从 iPhone 复制回我的笔记本电脑吗?我不知道有任何机制允许我进行文件系统样式
我在 div 中有一个(带边框)。这在 Firefox 和 IE 10 上看起来不错(不确定旧版本的 IE)。但是,有时 IE 会激活兼容模式,然后表单(输入框和提交按钮)会脱离 div。是否有一些
内的 anchor 脱离
这是我的html文件 My text content is here...... lINK1lINK2 这是CSS div { width:960px; border:1px so
有人可以指出我研究如何防止用户使用 Ctrl+Z、Ctrl+C? 最佳答案 如果你用 PCNTL 编译了 php (进程控制)并且未运行 Windows,您可以使用 pcntl_signal() .
我是一名优秀的程序员,十分优秀!