Question

我有一个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，那么该块永远不会显示。

Answer 1

如果您的元素的默认值为display: block，它将占据整个宽度，您最好指定display: inline-block;或display: table;

＆＃13;

$('#lname').focusout(function() {
  if ($(this).val().length < 3) {
    $(this).next().fadeTo("slow", 1, function() {
      // Animation complete.
    });
  }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: