顯示具有 css3 標籤的文章。 顯示所有文章
顯示具有 css3 標籤的文章。 顯示所有文章

2020年5月14日 星期四

2014年10月8日 星期三

【CSS】list-style-position

項目符號的位置:list-style-position
list-style-position:outside -> 不縮排
list-style-position:inherit -> 如果有第二排會縮排 預設值
  • SELECT TOP 20 text FROM sys.dm_exec_query_stats as qs CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st ORDER BY qs.creation_time DESC
  • SELECT TOP 20 text FROM sys.dm_exec_query_stats as qs CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st ORDER BY qs.creation_time DESC
  • SELECT TOP 20 text FROM sys.dm_exec_query_stats as qs CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st ORDER BY qs.creation_time DESC
    • SELECT TOP 20 text FROM sys.dm_exec_query_stats as qs CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st ORDER BY qs.creation_time DESC
    • SELECT TOP 20 text FROM sys.dm_exec_query_stats as qs CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st ORDER BY qs.creation_time DESC
    • SELECT TOP 20 text FROM sys.dm_exec_query_stats as qs CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st ORDER BY qs.creation_time DESC
      
    // CSS
    .demo{
     width:300px;
     margin:0px;
     padding-left:30px;
     list-style-position:inside;
    }
    
    .demo li{
     margin-top:10px;
     list-style:circle;
    }
    
    ul.demo2{ /* 一定要用ul的樣子 */
     width:300px;
     list-style-position:outside;
     margin:0px;
     padding-left:30px;
     padding-top:30px;
    }
    
    .demo2 li{
     margin-top:10px;
     list-style:circle;
    }
    
    // HTML
    <div class="demo">
      <li>SELECT TOP 20 text FROM sys.dm_exec_query_stats as qs CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st ORDER BY qs.creation_time DESC</li>
      <li>SELECT TOP 20 text FROM sys.dm_exec_query_stats as qs CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st ORDER BY qs.creation_time DESC</li>
      <li>SELECT TOP 20 text FROM sys.dm_exec_query_stats as qs CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st ORDER BY qs.creation_time DESC</li>
    </div>
    
    <ul class="demo2">
      <li>SELECT TOP 20 text FROM sys.dm_exec_query_stats as qs CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st ORDER BY qs.creation_time DESC</li>
      <li>SELECT TOP 20 text FROM sys.dm_exec_query_stats as qs CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st ORDER BY qs.creation_time DESC</li>
      <li>SELECT TOP 20 text FROM sys.dm_exec_query_stats as qs CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st ORDER BY qs.creation_time DESC</li>
    </ul>