相关疑难解决方法(0)
CSS 100%高度,填充/边距
这让我疯狂了好几天了,但实际上这是我在过去几年中一直存在的问题:使用HTML/CSS我怎样才能制作出具有宽度和/或宽度的元素高度是它的父元素的100%,仍然有适当的填充或边距？
所谓"适当的"我的意思是,如果我的父元素是200px高大的,我指定height = 100%用padding = 5px我所期望的,我应该得到一个190px高的元素与border = 5px所有各方,很好地集中在父元素.
现在,我知道那不是标准盒子模型指定它应该如何工作(虽然我想知道为什么,确切地说......),所以明显的答案不起作用:
#myDiv {
width: 100%
height: 100%;
padding: 5px;
}
但在我看来,必须有一些方法可以为任意大小的父母可靠地产生这种效果.有谁知道完成这个(看似简单)任务的方法？
哦,为了记录,我对IE兼容性并不十分感兴趣,所以应该(希望)让事情变得更容易一些.
编辑:自从一个例子被要求,这是我能想到的最简单的一个:
<html style="height: 100%">
<body style="height: 100%">
<div style="background-color: black; height: 100%; padding: 25px"></div>
</body>
</html>
接下来的挑战是让黑盒子在所有边缘都显示25像素的填充,而页面不会变得足够大以至于需要滚动条.
推荐指数
解决办法
查看次数
Div宽度100%减去固定的像素数量
如何在不使用表或JavaScript的情况下实现以下结构？白色边框代表div的边缘,与问题无关.
中间区域的大小将会变化,但它将具有精确的像素值,整个结构应根据这些值进行缩放.为了简化它,我需要一种方法将"100% - n px"宽度设置为顶部中间和底部中间div.
我很欣赏一个干净的跨浏览器解决方案,但万一不可能,CSS黑客会这样做.
这是奖金.我一直在努力的另一个结构,并最终使用表或JavaScript.它略有不同,但引入了新的问题.我一直主要在基于jQuery的窗口系统中使用它,但我想保持布局不受脚本限制,只能控制一个元素(中间元素)的大小.
推荐指数
解决办法
查看次数
用显示输入:块不是一个块,为什么不呢？
为什么display:block;width:auto;我的文本输入不像div那样填充容器宽度？
我的印象是div只是一个具有自动宽度的块元素.在下面的代码中,div和输入不应该有相同的尺寸吗？
如何获得填充宽度的输入？100%宽度不起作用,因为输入具有填充和边框(导致最终宽度为1像素+5像素+ 100%+ 5像素+ 1像素).固定宽度不是一个选项,我正在寻找更灵活的东西.
我更喜欢直接回答变通方法.这似乎是一个CSS怪癖,理解它可能会有用.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width:auto</title>
<style>
div, input {
border: 1px solid red;
height: 5px;
padding: 5px;
}
input, form {
display: block;
width: auto;
}
</style>
</head>
<body>
<div></div>
<form>
<input type="text" name="foo" />
</form>
</body>
</html>
我应该指出我已经可以使用包装器解决方法做到这一点.除了与页面语义和CSS选择器关系的这种联系之外,我试图理解问题的本质以及是否可以通过改变INPUT本身的性质来克服它.
好的,这很奇怪!我发现解决方案是简单地添加max-width:100%到输入width:100%;padding:5px;.然而,这引发了更多问题(我将在另一个问题中提出),但似乎宽度使用普通的CSS框模型,max-width使用Internet Explorer边框模型.真奇怪.
好吧,最后一个似乎是Firefox 3中的一个错误.Internet Explorer 8和Safari 4将最大宽度限制为100%+填充+边框,这是规范所要做的.最后,Internet Explorer做对了.
天啊,这真棒!在玩这个游戏的过程中,在尊敬的大师Dean Edwards和Erik Arvidsson的帮助下,我设法将三个独立的解决方案拼凑在一起,在具有任意填充和边框的元素上实现真正的跨浏览器100%宽度.见下面的答案.此解决方案不需要任何额外的HTML标记,只需要一个类(或选择器)和旧版Internet Explorer的可选行为.
推荐指数
解决办法
查看次数
输入内的填充打破宽度100%
好的,我们知道设置填充到对象会导致其宽度发生变化,即使它是明确设置的.虽然人们可以争论这背后的逻辑,但它会导致某些元素出现问题.
在大多数情况下,您只需添加一个子元素并为该元素添加填充而不是设置为100%,但对于表单输入,这不是一个可能的步骤.
看看这个:http://sandman.net/test/formcss.html
第二个输入的填充设置为5px,我更喜欢默认设置.但不幸的是,这使得输入在所有方向上增长10px,包括将100px增加到100%宽度.
这里的问题是我无法在输入中添加子元素,所以我无法修复它.所以问题是:
有没有办法在输入内添加填充,同时仍然保持宽度100%？它需要100%,因为表单将在不同宽度的父级中呈现,所以我事先不知道父级的宽度.
推荐指数
解决办法
查看次数
在td内部具有100%宽度的文本输入在td之外扩展/继续
这是现场演示
我试图在td中放入一个填充文本输入,我希望它占据宽度的100%,但它超出了td.我不明白为什么会这样,有人知道吗？
CSS
table{
border: solid 1px gray;
width: 90%;
}
input{ width: 100%; padding:10px; }
HTML
<table>
<tr>
<td style="width:150px;">Hello</td>
<td><input type='text' value='hihihih'/></td>
</tr>
</table>
推荐指数
解决办法
查看次数
保持<input type ="text"/> 100%宽度不会溢出其容器而不使用HTML hacks并使其看起来像文本框？
首先,我在主题中说"没有HTML黑客",因为我没有足够的空间将所有这些黑客放在一行上.
我遇到了这些问题,但它们不能满足我的需求:
宽度为100%的CSS输入超出父级界限
如何为HTML文本输入和下拉输入设置相同的宽度
我可以阻止100%宽度文本框扩展到其容器之外吗？
以下是一些原因:
- 我不能使用块元素
- 输入必须保持其斜角/插入样式,使其看起来像一个文本框(业务不会像一个不明显的矩形,周围有1px实线边框)
- 没有CSS3(一些用户仍然在IE6和IE7上)
- 我不能用我神奇的DIV元素包装公司网站上的每一个输入.
我发现该<!DOCTYPE>指令会影响输入上的这种溢出行为.研究告诉我,如果没有这个指令,浏览器就处于怪异模式.我猜这就是为什么,在怪癖模式下,输入看起来......正确吗？我不明白.
无论如何,这是一个小提琴:
如果腐烂,这里是那个小提琴中的HTML:
<input id="txtwoo" style="width:300px" type="text" />
<br />
<select id="cbowoo" style="width:300px">
</select>
注意文本框比下拉列表更宽.我希望文本框的外边界与下拉列表的完全相同的宽度一直到像素(外边界包括任何边框,边距等).下拉列表必须保持不变.我不想用任何元素包装输入.我想要一种可以直接应用于文本输入本身的样式,这样可以防止它超出设置的像素宽度.我希望它保持斜角/插入样式.
如果这是不可能的,你的答案"你不能这样做"就足以作为答案了.否则,请摆弄我的小提琴,让我知道如何让这个工作.
推荐指数
解决办法
查看次数