gpt4 book ai didi

html - 使绝对定位元素向左扩展

转载 作者:太空宇宙 更新时间:2023-11-03 22:46:56 24 4
gpt4 key购买 nike

我想显示包含元素之外的元素列表。

目前看起来像这样,如果只有一个元素(第 2 行)就可以了。但是当我有多个元素时,它们应该向左移动而不是向右移动。

enter image description here

下图就是我想要的:

enter image description here

顺序并不那么重要。重要的是它们应该向左扩展,而不是向右扩展。数字 (1,2,3,4) 永远不应放在“表格”上方。可以有 X 个“ float 元素”,我不想对其进行硬编码。以下是包含所有相关 HTML 的片段。

ul.items.table-style > li {
padding: 2px 5px 4px 5px;
border: 1px solid #dddddd;
margin-top: 0;
}

ul.items.table-style {
margin-bottom: 20px;
}
ul.items {
list-style: none;
margin-left: 0;
padding-left: 0;
}

ul.items.table-style > li ul.left-outside {
position: absolute;
margin-left: -20px;
background-color: blue;
list-style-type: none;
padding: 0;
}
ul.items.table-style > li ul.left-outside li {
display:inline-block;
width: 10px;
background-color:grey;
color:yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3"> <!-- Added just to shrink the list in this example -->
<ul class="items table-style">
<li class="row">
<ul class="left-outside">
<li>1</li>
<li>2</li>
</ul>
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</li>
<li class="row">
<ul class="left-outside">
<li>1</li>
</ul>
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</li>
<li class="row">
<ul class="left-outside">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</li>
<li class="row">
<ul class="left-outside">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</li>
</ul>
</div>
</div>


</div>

最佳答案

您可以将 transform: translateX 添加到您的 .left-outside 类中

ul.items.table-style > li ul.left-outside {
position: absolute;
margin-left: -20px;
background-color: blue;
list-style-type: none;
padding: 0;
transform: translateX(-100%);
}
ul.items.table-style > li ul.left-outside li {
display:inline-block;
width: 10px;
background-color:grey;
color:yellow;
transform: translateX(-100%);
}

fiddle

关于html - 使绝对定位元素向左扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41570419/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com