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

link：codepen

问题：显然，对话框类按钮的宽度是硬编码的，但我需要动态调整close类锚点（在我的例子中为'X'）的位置。

Answer 1

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

解决方案： .dialog

将宽度更改为 min-width

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你的帖子颇具误导性。当我看到＆＃34;标签体验＆＃34;我在沿着标签线思考。回到你的问题。您的关闭按钮被定义为距离对话框div右侧5px。所以你真的需要改变对话div的宽度。

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

在文本替换之前获取按钮的宽度（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;
}

动态定位html元素

2 个答案: