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>

css：

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

链接：码页

问题:显然，对话框类按钮的宽度是硬编码的，但是我需要动态地调整关闭类锚的位置(在我的示例中是‘X’)。

Answer 1

对话框的宽度必须是灵活的，以使关闭框仍然保持在或调整在框增长。

解决方案：将宽度更改为.dialog的最小宽度

​

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>

​

Answer 2

你的帖子相当误导人。当我看到“选项卡体验”的时候，我在想的是标签线。回到你的问题上。您的关闭按钮被定义为从您的对话框div的右边5 5px。所以你真的需要改变你的对话视场的宽度。

例如：如果您的div默认为200 if。当你点击按钮时，你应该

在文本替换之前获取按钮的宽度(WidthBeforeChange)，在文本替换后获取按钮的宽度(WidthAfterChange)，将WidthAfterChange-WidthBeforeChange的差异添加到对话框div的宽度中。

--上面是一个JS解决方案，这里是一个css解决方案--

.dialog {
  background: #ddd;
  border: 1px solid #ccc;
  border-radius: 5px;
  float: left;
  position: relative;
  min-width: 205px;  /*change it from a fixed width to a min width*/
}

/** add this to your code **/
.dialog input[type="button"]{
  margin-right: 100px;
}