Question

我能够使按钮与我的文本区域对齐（右下方对齐），这在单击选项卡之前看起来不错。单击选项卡后，按钮将一直向右移动。我怀疑这与我在选项卡上单击时的显示选项有关。在选项卡上单击，我正在显示div inline，如下所示：

document.getElementById(sectionName).style.display = "inline";

当我再次刷新页面时，默认显示选项似乎可以正常工作。

我尝试使用其他显示选项（例如block），但是当我单击选项卡时，它们仍然向右移动。

如何防止选项卡单击时按钮移动？

index.html：

<div id="verify" class="tabcontent statusAreaDiv">
  <span class="statusTextAreaLabel">Status:</span>
    <textarea class="statusTextArea" readonly></textarea>
      <span class="buttonForTextArea">
        <button class="button" id="btn1">Verify</button>
        <button class="button" id="btn2">Download</button>
      </span>
</div>
...
...
<script>
function showTab(event, sectionName) {
    var tabContents = document.getElementsByClassName('tabcontent');
    for (var i = 0; i < tabContents.length; i++) { 
        tabContents[i].style.display = 'none';
        console.log("The table contents is: " + tabContents[i]);
    }
    var tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
        console.log("tablinks class is: " + tablinks[i]);
    }

    document.getElementById(sectionName).style.display = "inline";
    event.currentTarget.className += " active";
}
</script>

css：

.statusAreaDiv {
    min-width: 490px;
    position: relative;
    display: inline-block;
}

.statusTextArea{
    position: relative;
    width: 800px;
    border: 2px solid #dddddd;
    border-radius: 10px;
    height: 500px;
    overflow-y: scroll;
    font-size:13px;
    font-family:Verdana, Geneva, sans-serif;
    background-color: light grey;
}

.statusAreaDiv span.statusTextAreaLabel{
    padding-top: 2em;
    font-family: verdana;
    display: block;
    text-align: left;
    font-size:13px;
}

.statusAreaDiv span.buttonForTextArea{
    display: block;
    text-align: right;
}

.button {
  padding: 5px 15px;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #368DEE;
  border: none;
  border-radius: 8px;
  box-shadow: 0 5px #999;
}

Answer 1

尝试一下，正在寻找吗？

*{box-sizing:border-box;font-family:sans-serif;margin:0;padding:0;}
textarea,button{
  display:inline-block;
  margin:20px 0;
  position:relative;
  vertical-align:middle;
}
textarea{
  left:calc(50% - 150px);
  width:300px;
}
button{
  left:calc(50% - 135px);
}

<textarea></textarea><button>button</button>

单击选项卡后立即浮动HTML按钮

1 个答案: