Question

我正在遵循本指南来设计我的目录： https://www.tipsandtricks-hq.com/simple-table-of-contents-toc-using-pure-html-and-css-code-9217

我在这里实现了它： https://jsfiddle.net/qr3m3a9e/

＆＃13;

#toc_container {
  background: #f9f9f9 none repeat scroll 0 0;
  border: 1px solid #aaa;
  display: table;
  font-size: 95%;
  margin-bottom: 1em;
  padding: 20px;
  width: auto;
}

.toc_title {
  font-weight: 700;
  text-align: center;
}

#toc_container li, #toc_container ul, #toc_container ul li{
  list-style: outside none none !important;
}

＆＃13;

<div id="toc_container">
  <p class="toc_title">Contents</p>
  <ul class="toc_list">
    <li><a href="#First_Point_Header">1 First Point Header</a>
      <ul>
        <li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
        <li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
      </ul>
    </li>
    <li><a href="#Second_Point_Header">2 Second Point Header</a></li>
    <li><a href="#Third_Point_Header">3 Third Point Header</a></li>
  </ul>
</div>

＆＃13;

我想知道如何更改#toc_container以便它具有固定的高度和自动宽度。

我尝试更改＆＃34; auto＆＃34;的宽度至＆＃34; 100％＆＃34;并将高度设置为＆＃34; 400px＆＃34;但它并没有像我期望的那样将列表包装成两列。

Answer 1

为什么不使用column-count？

https://jsfiddle.net/qr3m3a9e/1/

＆＃13;

#toc_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    column-count: 2;
    font-size: 95%;
    margin-bottom: 1em;
    padding: 20px;
    width: auto;
    height: 400px;
}

.toc_title {
    font-weight: 700;
    text-align: center;
}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;
}

＆＃13;

<div id="toc_container">
    <p class="toc_title">Contents</p>
    <ul class="toc_list">
        <li><a href="#First_Point_Header">1 First Point Header</a>
            <ul>
                <li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
                <li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
            </ul>
        </li>
        <li><a href="#Second_Point_Header">2 Second Point Header</a></li>
        <li><a href="#Third_Point_Header">3 Third Point Header</a></li>
        <li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
        <li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
        </ul>
        </li>
        <li><a href="#Second_Point_Header">2 Second Point Header</a></li>
        <li><a href="#Third_Point_Header">3 Third Point Header</a></li>
        <li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
        <li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
        </ul>
        </li>
        <li><a href="#Second_Point_Header">2 Second Point Header</a></li>
        <li><a href="#Third_Point_Header">3 Third Point Header</a></li>
        <li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
        <li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
        </ul>
        </li>
        <li><a href="#Second_Point_Header">2 Second Point Header</a></li>
        <li><a href="#Third_Point_Header">3 Third Point Header</a></li>
        <li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
        <li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
        </ul>
        </li>
        <li><a href="#Second_Point_Header">2 Second Point Header</a></li>
        <li><a href="#Third_Point_Header">3 Third Point Header</a></li>
        <li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
        <li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
        </ul>
        </li>
        <li><a href="#Second_Point_Header">2 Second Point Header</a></li>
        <li><a href="#Third_Point_Header">3 Third Point Header</a></li>
        <li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
        <li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
        </ul>
        </li>
        <li><a href="#Second_Point_Header">2 Second Point Header</a></li>
        <li><a href="#Third_Point_Header">3 Third Point Header</a></li>
    </ul>
</div>

＆＃13;

当施加高度时，从两个两列的样式目录

1 个答案: