CSS : 둥근 박스 목록

Question

을 생산하는 방법은 (아마도 <ul> 사용) 가장 간단한 방법으로 다음과 같은 재현하고 싶습니다 : 그래서

을, 나는만큼의 행을 추가 할 수 있도록하고 싶습니다 이 목록에는 그림, 설명 및 카운터로 구성된 각 행이 필요합니다. 목록은 둥근 상자에 있어야하며 행은 줄로 구분해야합니다.

CSS 기술을 가진 사람이 나를 도와 줄 수 있습니까?

고맙습니다.

Answer 1

음, here's one way of doing it.

HTML :

<ul> 
    <li> 
     <img src="http://www.placekitten.com/16/16"> 
     Item 1 
     <span>1</span> 
    </li> 

    <!-- More list items --> 
</ul> 

CSS : 당신은 심지어 "둥근 모서리"에 대한 구글을 시도처럼

/* Container with border and rounded corners */ 
ul { 
    border: 1px solid #ccc; 
    width: 200px; 

    /* Border radius for Chrome, Webkit and other good browsers */ 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    -border-radius: 10px; 
    border-radius: 10px; 
} 

/* Only add border to bottom of <li> */ 
li { 
    padding: 10px; 
    border-bottom: 1px solid #ccc; 
} 

/* Get rid of the last <li>'s bottom border to stop overlap with <ul>'s border */ 
/* :last-child works in IE7+ */ 
li:last-child { 
    border-bottom: none; 
} 

/* Get the number and float it right */ 
span { 
    float: right; 
} 
​ 

Answer 2

저는 JSfiddle here에서 작업하고 있습니다.

HTML :

<ul> 
    <li><img src="http://ghickman.co.uk/images/sidebar/stackoverflow.png"/> <span>text</span> <span class="num">1</span></li> 
    <li><img src="http://ghickman.co.uk/images/sidebar/stackoverflow.png"/> <span>text</span> <span class="num">1</span></li> 
    <li><img src="http://ghickman.co.uk/images/sidebar/stackoverflow.png"/> <span>text</span> <span class="num">1</span></li> 
</ul> 

CSS :

ul { 
    border-radius:10px; 
    border:1px solid #DDD; 
    margin:10px; 
    width:200px; 
} 

li:last-child { 
    padding:7px; 
} 

li:not(:last-child) { 
    padding:7px; 
    border-bottom:1px solid #DDD; 
} 

span.num { 
    float:right; 
} 
img { 
    width:20px; 
} 

span { 
    float:none; 
} 

Answer 3

그것은 보이지 않지만 어쨌든, 당신은 두 가지 옵션이 있습니다 :

을
1. CSS 속성 border radius을 사용하지만 IE7에서는 작동하지 않습니다.
2. 사용 이미지와 background 재산

Answer 4

HTML :

<ul> 
    <li>Event</li> 
    <li>Journal</li> 
    <li>Task</li> 
</ul> 

CSS :

여기

ul { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background:#3d3d3; border:1px solid gray; width:400px; } 
ul li { padding: 5px 5px 5px 20px; border-top:1px solid gray; } 

가에 대한 JsFiddle입니다.