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

链接：codepen

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

Answer 1

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

解决方案： 将 width 更改为 min-width for 。对话框

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

您的 post 具有误导性。当我看到 "tabbed experience" 时，我在考虑标签行。回到你的问题。您的关闭按钮被定义为距对话框右侧 5 像素 div。所以你真的需要改变对话的宽度 div。

例如。如果您的 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 元素的动态定位

dynamic positioning of html element

html

css

jquery