Div 定位相对给最小宽度除非内容更宽
Div positioned relative give min-width unless content is wider
我有一个 div 位置:相对(这应该无关紧要)。我想确保宽度是一个特定的宽度,除非内容更大。我试过 min-width 但它似乎被忽略了。当文本内容比宽度宽时,显式设置宽度也会强制换行。
<div style="padding-top:6px; max-height:40px;">
<input type="text" id="lname" placeholder="LAST NAME">
<div id="lnameError" class="error-block">Please enter a valid last name</div>
</div>
.error-block {
border: solid 1px #e60211;
background-color: #ffffff;
min-width: 250px;
display:none;
position: relative;
left: 288px;
top: -40px;
font-size: 16px;
color: #e60211;
font-family:MontrealTS-Regular;
line-height:38px;
text-align:left;
padding-left:12px;
padding-right:12px;
}
$('#lname').focusout(function () {
if ($(this).val().length < 3) {
$(this).next().animate({
opacity: "show"
}, "slow", "jswing");
}
});
如果我使用 display:inline-block 动画后定位和大小不正确。如果我在 css 中没有显示属性值并且在 css 中不透明度值为 0,则该块永远不会显示。
如果您的元素的默认值 display: block
将占据整个宽度,您最好指定 display: inline-block;
或 display: table;
$('#lname').focusout(function() {
if ($(this).val().length < 3) {
$(this).next().fadeTo("slow", 1, function() {
// Animation complete.
});
}
});
.error-block {
border: solid 1px #e60211;
background-color: #ffffff;
min-width: 250px;
display: inline-block;
position: relative;
/* left: 288px; */
/* top: -40px; */
font-size: 16px;
color: #e60211;
font-family: MontrealTS-Regular;
line-height: 38px;
text-align: left;
padding-left: 12px;
padding-right: 12px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-top:6px; max-height:40px;">
<input type="text" id="lname" placeholder="LAST NAME">
<div id="lnameError" class="error-block">Please enter a valid last name</div>
</div>
我有一个 div 位置:相对(这应该无关紧要)。我想确保宽度是一个特定的宽度,除非内容更大。我试过 min-width 但它似乎被忽略了。当文本内容比宽度宽时,显式设置宽度也会强制换行。
<div style="padding-top:6px; max-height:40px;">
<input type="text" id="lname" placeholder="LAST NAME">
<div id="lnameError" class="error-block">Please enter a valid last name</div>
</div>
.error-block {
border: solid 1px #e60211;
background-color: #ffffff;
min-width: 250px;
display:none;
position: relative;
left: 288px;
top: -40px;
font-size: 16px;
color: #e60211;
font-family:MontrealTS-Regular;
line-height:38px;
text-align:left;
padding-left:12px;
padding-right:12px;
}
$('#lname').focusout(function () {
if ($(this).val().length < 3) {
$(this).next().animate({
opacity: "show"
}, "slow", "jswing");
}
});
如果我使用 display:inline-block 动画后定位和大小不正确。如果我在 css 中没有显示属性值并且在 css 中不透明度值为 0,则该块永远不会显示。
如果您的元素的默认值 display: block
将占据整个宽度,您最好指定 display: inline-block;
或 display: table;
$('#lname').focusout(function() {
if ($(this).val().length < 3) {
$(this).next().fadeTo("slow", 1, function() {
// Animation complete.
});
}
});
.error-block {
border: solid 1px #e60211;
background-color: #ffffff;
min-width: 250px;
display: inline-block;
position: relative;
/* left: 288px; */
/* top: -40px; */
font-size: 16px;
color: #e60211;
font-family: MontrealTS-Regular;
line-height: 38px;
text-align: left;
padding-left: 12px;
padding-right: 12px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-top:6px; max-height:40px;">
<input type="text" id="lname" placeholder="LAST NAME">
<div id="lnameError" class="error-block">Please enter a valid last name</div>
</div>