使绝对定位元素向左扩展

时间：2017-01-10 13:48:32

标签： html css twitter-bootstrap

我想显示一个包含元素的元素列表。

目前看起来像这样，如果只有一个元素（第2行），这很好。但是当我有几个元素时，它们应该向左移动而不是向右移动。

enter image description here

下图是我想要的：

enter image description here

订单并不重要。重要的是它们应该向左扩展，而不是向右扩展。数字（1,2,3,4）绝不应放在＆＃34;表＆＃34;之上。可以有X个＆＃34;浮动项目＆＃34;，我不想硬编码。以下是包含所有相关HTML的代码段。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

您可以将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

答案 1 :(得分：1)

使用transform: translate()代替margin。他希望能够抵消自我元素的大小。

＆＃13;
＆＃13; 
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;
    transform: translate(-100%, 0);
    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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

您需要定义right: 100%以在父级左侧创建容器的右边缘。

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;
    right: 100%;
    width: 30%;
    background-color: blue;
    list-style-type: none;
    padding: 0 5px;
    text-align: right;
}
ul.items.table-style > li ul.left-outside li {
    display:inline-block;
    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 col-xs-10 col-xs-offset-1"> <!-- 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>

相关问题
最新问题