Div定位相对给出最小宽度，除非内容更宽

Question

我有一个div位置：相对（这应该不重要）。我想确保宽度是一个特定的宽度，除非内容较大。我试过最小宽度但似乎被忽略。当文本内容宽于宽度时，明确设置宽度也会强制换行。

<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，块永不显示。

Answer 1

如果你的元素有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>