jquery - html元素的动态定位

Question

下面提到的是一个示例代码，我在其中尝试动态创建选项卡式体验。

html:

<ul id="menu">
    <div class="dialog">
        <li>
            <input type="button" value="Tab 1"></input>
            <a href="#" class="close"></a>
        </li></div>
<div class="dialog">
        <li>
            <input type="button" value="Tab 2 - hello world hello world"></input>
            <a href="#" class="close"></a>
        </li>
    </div>
</ul>

样式:

.close {
  color: #777;
  font: 14px/100% arial, sans-serif;
  position: absolute;
  right: 5px;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
  top: 5px;
}

.close:after {
  content: '✖';
}

.dialog {
  background: #ddd;
  border: 1px solid #ccc;
  border-radius: 5px;
  float: left;
  position: relative;
  width: 205px;
}

ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li input {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}
ul#menu li input:hover {
    background-color: orange;
}

JQ:

function newTab(){
  $('#tab2').val("hello world hello world hello world");
}

链接:codepen

问题:很明显，对话框类按钮的宽度是硬编码的，但我需要动态调整关闭类 anchor (在我的示例中为“X”)的位置。

Answer 1

对话框的宽度必须是灵活的，以便关闭框仍然保持在内部或随着框的增长而调整。

解决方案:将 .dialog 的 width 更改为 min-width

function newTab(){
  $('#tab2').val("hello world hello world hello world");
}

.close {
  color: #777;
  font: 14px/100% arial, sans-serif;
  position: absolute;
  right: 5px;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
  top: 5px;
}

.close:after {
  content: '✖';
}

.dialog {
  background: #ddd;
  border: 1px solid #ccc;
  border-radius: 5px;
  float: left;
  position: relative;
  min-width: 205px;
}

ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li input {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}
ul#menu li input:hover {
    background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
    <div class="dialog">
        <li>
            <input type="button" id="tab1" value="Tab 1"></input>
            <a href="#" class="close"></a>
        </li></div>
<div class="dialog">
        <li>
            <input type="button" id="tab2" value="Tab 2"></input>
            <a href="#" class="close"></a>
        </li>
    </div>
</ul>
<input type="button" onclick="newTab()" value="Click"></input>