Jquery html元素的动态定位

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

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>

JQ:

链接：

---

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

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

解决方案：将宽度更改为的最小宽度。对话框

函数newTab（）{ $（'#tab2'）.val（“hello world hello world hello world”）； }

。关闭{
颜色：#777；
字体：14px/100%arial，无衬线；
位置：绝对位置；
右：5px；
文字装饰：无；
文本阴影：0 1px 0#fff；
顶部：5px；
}
.结束：之后{
内容:'✖';
}
.对话{
背景：ddd；
边框：1px实心#ccc；
边界半径：5px；
浮动：左；
位置：相对位置；
最小宽度：205px；
}
菜单{
填充：0；
}
ul#菜单li{
显示：内联；
}
ul#菜单li输入{
背景色：黑色；
颜色：白色；
填充：10px 20px；
文字装饰：无；
边界半径：4px4p0；
}
ul#菜单li输入：悬停{
背景颜色：橙色；
}

你的帖子很容易让人误解。当我看到“标签式体验”时，我的想法是沿着标签的路线。 回到你的问题上来。关闭按钮定义为对话框div右侧5px。 因此，您确实需要更改对话div的宽度

如果你的div默认为200px。 当你点击按钮时，你应该

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

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

---

你的结构不正确…你不能在像那样的

ul

中有一个div。嘿@Paulie_D，请参考上面提到的代码笔链接，它正在工作，结构可能是wrng，但req是这样的，我可能需要显示/隐藏div。即使只是删除min-width属性也可以工作。谢谢，批改答案，接受了。那就更好了。很高兴我能帮忙

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

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

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