Question

我一直在搞乱CSS，但无法获得理想的结果。

我用url＆amp; amp做了一个简单的列表html中的缩略图，并使用CSS设置样式。

我无法将列表放入页面中心。我希望它甚至可以来自双方，但更多的是在页面的右侧。

请有人帮我解决这个问题。

CSS

body {
background-color: #151924;
}
ul#playlist
{
text-align: center;
}
ul#playlist li
{   
    display:block;
    list-style: none;
    background: #323B55;
    border: 1px solid #b2b2b2;
    max-width: 100%;
    margin-top: 5px
}
ul#playlist li img 
{
  float: left;
  margin: 15px 15px 15px 15px;
}
ul#playlist h3 
{
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}

ul#playlist li a
{
    font-weight: bold;
    line-height: 2.8em;
    margin-left: 50px;
    color: #b2b2b2
}

  <title>Playlist test</title>
    <body> <ul style="list-style-type:none" id="playlist">
<li><a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ">
  <img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg">
  <h3>Star TV</h3>
  <p>Lorem ipsum dolor sit amet...</p></li>
<li>      <a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ">
  <img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg">
  <h3>Star TV</h3>
  <p>Lorem ipsum dolor sit amet...</p></a></li>
<li>      <a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ">
  <img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg">
  <h3>Star TV</h3>
  <p>Lorem ipsum dolor sit amet...</p></a></li>
<li>      <a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ">
  <img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg">
  <h3>Star TV</h3>
  <p>Lorem ipsum dolor sit amet...</p></a></li>
<li>      <a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ">
  <img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg">
  <h3>Star TV</h3>
  <p>Lorem ipsum dolor sit amet...</p></a></li>
<li>      <a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ">
  <img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg">
  <h3>Star TV</h3>
  <p>Lorem ipsum dolor sit amet...</p></a></li>
<li>      <a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ">
  <img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg">
  <h3>Star TV</h3>
  <p>Lorem ipsum dolor sit amet...</p></a></li>





  </ul> </body>

http://jsfiddle.net/7yos5231/

Answer 1

#playlist ul继承50px 左边填充（可用于隐藏的li项目符号）。

您必须重置#playlist { padding 0; }或添加所需的填充值，使其等于内容#playlist { padding 0 50px; }。

更新了小提琴：http://jsfiddle.net/7yos5231/5/

Answer 2

ul#playlist
{
    text-align: center;
    margin: 0 auto;
    padding : 0 20px;/* change to the value you desire.*/
}

如何用css中心ul列表？

2 个答案: