css - CSS: 丸められたボックス化されたリストを作成する方法

Question

以下を最も簡単な方法で再現したいと思います（おそらく a を使用<ul>）：

したがって、このリストに必要な数の行を追加できるようにしたいと考えています。各行は、写真、説明、およびカウンターで構成されています。リストは丸みを帯びたボックスに入れ、行は線で区切る必要があります。

CSS のスキルを持っている人がこれを手伝ってくれますか?

どうもありがとう！

Answer 1

さて、ここにそれを行う1つの方法があります。

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に取り組んでいます。

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

「丸みを帯びた角」をグーグルで検索しようとしたようには見えませんが、とにかく、2 つのオプションがあります。

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です。