loを加えるとレイアウトが崩れてしまいます。。

Question

➀こんな風に、カードが並んでいます。
https://jsfiddle.net/ed0gw9dv/

➁このカードの上に「div要素のボタン」(画像のマル部分)を表示したいと思い、olの入れ子を作ったりしてみました。
https://jsfiddle.net/ed0gw9dv/4/

しかし!!
➁がうまくいかないのです。
ご覧のとおり、➀のレイアウトのままで「マル」というボタンが表示されることはなく、レイアウトが崩れてしまうのです。

入れ子構造に関するサイトなどいろいろ調べたのですが、手詰まりです。
ヒントのサイトでもうれしいので、知恵のある方にビシっとご教示いただければ幸いでございます。
よろしくお願いいたします。m(__)m

---

以下補足

➂ちなみにボタンの完成イメージはこのような感じです。
このボタンは諸事情でdiv要素になります。

Comments

[gin]

「マル」ってなんですか？

[退会済みユーザー]

ですよね(笑)。実際にはこちらのプラグイン(https://liginc.co.jp/programmer/archives/3497)でボタンを表示させようかと思っております。なので「マル」とは「丸いボタン」のことだと思ってくださいませ。尚、こちらのプラグインのボタンはdivの要素になってしまうみたいです。でもショートコードで呼び出すとliの中にもdivが配置できそうなので、「それならdivとか書かなくてマルとだけ書いておけばいっか」と、浅慮な表現に至った次第でした。(;'∀')

[gin]

結局のところ完成イメージってどんな形なんですか？➀のカード外の上にdiv要素があればいいんですかね？

[退会済みユーザー]

要領を得ないあまた(笑)の悪い表現ばかりでスミマセン。仰るとおりです。

Answer 1

こういうことです？

/*カード*/
.col-2 {
    margin: 30px 10px;
/*    box-shadow: 0 1px 4px 0;*/
    width: 45%;
    position: relative;
    height: 100%;    
}
.maru {
	margin: 0;
}
.card {
    box-shadow: 0 1px 4px 0;
}
ul.row {
    position:relative;
    z-index:1;
    display: flex;
    margin: 1% auto 10%;
    flex: wrap;
    justify-content: space-around;
}
ul.row li{
    list-style: none;
}

/*タイトル*/
.donna {
	margin: 0px auto 10px;
	z-index: 2;
	background: #4285f4;
	color: #fff;
	padding: 15px;
	font-weight: bold;
	text-align: center;
}

/*青い枠*/
.tokuchou {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    height: 28px;
}
.tokuchou span {
    border: 1px solid #FFF;
    border-radius: 4px;
    background: #4285F4;
    color: #fff;
    padding: 2px 4px;
    font-size: 12px;
    position: relative;
    z-index: 5;
    margin: 0px 0px -0px 5px;
    font-weight: normal;
}

/*画像*/
img {
    height: auto;
    max-width: 100%;
}

/*文字*/
p, h2 {
    text-align :center;
}

<div class="kiji">
<ul class="row">

<li class="col-2">
<div class="maru"><button>ボタン</button><button>ボタン</button><button>ボタン</button></div>
<div class="card">
<p class="donna">みみはこう動く</p>
<p class="tokuchou">
<span>ぴくぴく</span><span>かわいい</span>
</p>
<figure>
<img src="http://bit.ly/2g0ErNR" />
</figure>
<h2 class="zakkuri">動くみみ</h2>
<p class="naiyou">みみが動いています。</p>
</div>
</li>

<li class="col-2">
<div class="maru"><button>ボタン</button><button>ボタン</button><button>ボタン</button></div>
<div class="card">
<p class="donna">ねこはこう並ぶ</p>
<p class="tokuchou">
<span>ラブラブ</span><span>仲良し</span>
</p>
<figure>
<img src="http://bit.ly/2giSroF" />
</figure>
<h2 class="zakkuri">並ぶねこ</h2>
<p class="naiyou">ねこが並んでいます。</p>
</div>
</li>

</ul>
</div>

Comments

[gin]

<button>ボタン</button>は見た目上、仮でおいてるだけなので<span class="btn">ボタン</span>とか好きな感じにしてください。一応。

[退会済みユーザー]

どうもありがとうございます。そうか、boxshadowの範囲をcardというdivで囲めばよかったのですね。
わ！ちゃんとボタンまでついているではありませんか！
日ごろから顧客満足100%なお仕事をこなされているのでしょうね。笑

Answer 2

ol{
 ...
 padding: 0;
}

これを付け加えてみてください。
もしくはolではなくdivなどの要素を使えば改善するかもしれません。

Comments

[intelf___]

他にolを使っているなら
.col-2{
}
のようにクラスを指定した方がいいかもしれませんね。
あと、olはOrder List(オーダーリスト)と言って、数値をカウントして
1 右折する
2 直進する
のようにリストアップするときに使います。
今回の使い方では不適切なような気がします。

[退会済みユーザー]

「liの次はulを、その次はolを使う」というものだと思っておりました。入れ子の順序ではなく、それぞれの用途だったのですね。ありがとうございます。適切な使い方に配慮したいと思います('◇')ゞ

[intelf___]

適切な用途で要素を使うのは、あくまで他人が見たときに「ここはどういう目的の要素か」をわかりやすくするためです。
個人的に使う分にはcssで書き換えまくっちゃえばどんな要素を使っても全く同じデザインにできます。
なので、参考までに。
ulとolは対等だと思ってください。

ol=Order List
リストに順序があるものに使う
<ol>
<li>リスト１</li>
<li>リスト２</li>
</ol>

ul=Unorder List
リストに順序がないものに使う
<ul>
<li>リスト１</li>
<li>リスト２</li>
</ul>

Answer 3

リンク先のソースコードを拝見しましたが、下記の要素に対してCSSでwidth: 45%;が指定されています。

<ol class="col-2">

この<ol>要素の親である<li>要素の幅が①で表示している幅になるかと思いますが、その<li>要素の45%の幅なので②のような幅になります。

Comments

[退会済みユーザー]

なるほど！ちょっと私用で出かけてきます！あとで確認してみます！どうもありがとうございます！