サイト作成ソフトsiriusを使っています。
並び替え機能のjsを入れて、動きはするのですがCSSが効いてないようなのです。
横に4列綺麗に並んでほしいのですが、縦に並んでしまって困っています。
勉強不足で申し訳ないですがどなたかご教授頂けないでしょうか。
js↓
<link rel="stylesheet" href="./shuffle.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { var lists = $('.list li'); $(document).on('change', '.serchBox select', function() { lists.show(); for (var i = 0; i < $('.serchBox select').length; i++) { // 絞り込みの項目を取得 var item = $('.serchBox select').eq(i).attr('name'); // 絞り込みの対象を取得 var target = $('.serchBox select').eq(i).val();if(target != '') { for (var j = 0; j < lists.length; j++) { // 絞り込み対象でない場合は非表示 if(!lists.eq(j).find('.' + item).find('span').hasClass(target)) { lists.eq(j).hide(); } }; } }; });
});
</script>
html↓
<div class="serchBox"> <select name="type"> <option value="">種類を選択</option> <option value="mammals">哺乳類</option> <option value="reptiles">爬虫類</option> <option value="birds">鳥類</option> <option value="other">その他</option> </select> <select name="live"> <option value="">生活を選択</option> <option value="water">水中</option> <option value="land">陸上</option> <option value="water-and-land">水中と陸上</option> <option value="sky">空</option> </select> <select name="color"> <option value="">色を選択</option> <option value="black">黒系</option> <option value="white">白系</option> <option value="green">緑系</option> <option value="brown">茶系</option> </select> <select name="size"> <option value="">大きさを選択</option> <option value="small">小さい</option> <option value="middle">中くらい</option> <option value="large">大きい</option> </select> <select name="name"> <option value="">名前を選択</option> <option value="dog">イヌ</option> <option value="cat">ネコ</option> <option value="monkey">サル</option> <option value="dolphin">イルカ</option> <option value="jellyfish">クラゲ</option> <option value="penguin">ペンギン</option> <option value="turtle">カメ</option> <option value="redstart">ジョウビタキ</option> <option value="myna">九官鳥</option> <option value="butterfly">蝶</option> <option value="crocodile">ワニ</option> </select> </div> <ul class="list"> <li> <img src="01.jpg" width="240" height="155"> <p class="name">名前:<span class="dolphin">イルカ</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="water">水中</span></p> <p class="color">色:<span class="black">黒系</span></p> <p class="size">大きさ:<span class="large">大きい</span></p> </li> <li> <img src="02.jpg" width="240" height="155"> <p class="name">名前:<span class="jellyfish">クラゲ</span></p> <p class="type">種類:<span class="other">その他</span></p> <p class="live">生活:<span class="water">水中</span></p> <p class="color">色:<span class="white">白系</span></p> <p class="size">大きさ:<span class="small">小さい</span></p> </li> ・ ・ ・ <li> <img src="14.jpg" width="240" height="155"> <p class="name">名前:<span class="dog">イヌ</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="land">陸上</span></p> <p class="color">色:<span class="brown">茶系</span></p> <p class="size">大きさ:<span class="middle">中くらい</span></p> </li> </ul>cssはVisual Studio Codeを使ってファイルにして呼び込みました
css↓
@charset "utf-8";
body {
margin: 0;
padding: 0;
}
.back {
position: fixed;
bottom: 10px;
right: 10px;
}
ul {
margin: 0;
padding-left: 0;
}
li {
list-style: none;
}
p {
margin: 0;
}
#page {
width: 1040px;
margin: 0 auto;
}
.searchList {
margin-bottom: 20px;
}
.searchList li {
display: inline-block;
}
.list {
overflow: hidden;
}
.list li {
float: left;
width: 240px;
margin: 10px;
}
あなたの回答
tips
プレビュー