Question

我想隐藏此元素的背景，直到通过文本输入发生值更改。
我希望按钮的宽度随着添加的文本量（以及任何额外的填充）而增长。现在它自动填充其父容器的100％。我不希望这个元素填充其父容器的100％宽度。

以下是我现在所拥有的：

var $divC = $('.button');

$('.buttonInput').bind('keyup change', function() {
    $divC.html(this.value);
    if(this.value.length > 0) {
           $('.button').css('display', 'block')
        } else {
           $('.button').css('display', 'none')
        }
});

.button {
  font-size: 18px;
  font-weight: 400;
  line-height: 110%;
  margin: 15px 0;
  background-color: blue;
  color: white;
  padding: 15px;
  letter-spacing: 1px;
  border-radius: 3px;
  text-align: center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<div class="button basic2"></div>
<br><br>
<form>Enter text:<br><input class="buttonInput"></form>

Answer 1

将margin: auto;和display: none;添加到您的按钮，并使用display : table使宽度适合内容

var $divC = $('.button');

$('.buttonInput').bind('keyup change', function() {
    $divC.html(this.value);
    if(this.value.length > 0) {
           $('.button').css('display', 'table')
        } else {
           $('.button').css('display', 'none')
        }
});

.button {
  font-size: 18px;
  font-weight: 400;
  line-height: 110%;
  margin: 15px 0;
  background-color: blue;
  color: white;
  padding: 15px;
  letter-spacing: 1px;
  border-radius: 3px;
  text-align: center; 
  margin: auto;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<div class="button basic2"></div>
<br><br>
<form>Enter text:<br><input class="buttonInput"></form>

隐藏背景直到值更改

1 个答案: