[英]min-width on inline (not inline-block) behaving element
我想在一个contenteditable div上设置min-width,旁边有一些其他元素必须与div保持内联。
我见过的每个解决方案都使用内联块,但我不能使用内联块行为。 当内联块开始包装时,它仍然表现得像块元素,我需要div表现为内联元素。 我认为解决方案需要的不仅仅是CSS,但是当div的文本发生变化时,似乎很难设置任何事件。 欢迎使用涉及javascript和/或jQuery的解决方案。
编辑:这是我正在尝试做的简化版本。 如果用户输入的文本多于页面宽度,则内联块和块之间的行为会有所不同,这就是我所关注的。
<style type="text/css">
label {
width: 40px;
height: 40px;
}
#container {
font-size: 32px;
}
#content {
display: inline;
min-height: 37px; /* doesn't work on inline elements */
min-width: 80px; /* also doesn't work on inline elements */
}
</style>
<div id="container">
<input type="radio" />
<label>
<span></span>
</label>
<span>(A)</span>
<div id="content" contenteditable="true" unselectable="off">test</div>
</div>
好的,这是我提出的答案(在jQuery中)。 任何人都可以给我一些关于遗漏一些可能不会改变div内容或在div周围放置边框的事件的建议吗? (我也关注剪切/粘贴)。
$('#content').bind('blur focus load resize scroll click dblclick ' +
'mousedown mouseup mousemove change ' +
'select keydown keypress keyup', function () {
if($(this).width() <= 80) {
$(this).css("display", "inline-block");
}
else {
$(this).css("display", "inline");
}
})
现在习惯floating
像这样
a{
background:green;
min-height:200px;
float:left;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.