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>