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>