vue
1<html>
2<head>
3  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
4</head>
5 <body>
6    <div class="ctr">
7       <h5 class="text-center" id="obj-1">{{ testVal }}</h5>
8       <ul id="obj-2">
9         <li class="obj" v-for="item in items">
10           {{ item.message }}
11         </li>
12       </ul>
13   </div>
14   <script>
15     var example1 = new Vue({
16       el: '#obj-1',
17       data: {testVal: 'Hello World!'}
18     })
19     var example2 = new Vue({
20       el: '#obj-2',
21       data: {
22         items: [
23           { message: 'サンプル' },
24           { message: 'サンプル' },
25           { message: 'サンプル' },
26           { message: 'サンプル' },
27           { message: 'サンプル' },
28           { message: 'サンプル' }
29         ]
30       }
31     })
32   </script>
33   <style scoped>
34      .obj {
35        font-size: 1vw;
36        background-color: gray;
37        color:red;
38        display: inline-block;
39        width:120px;
40        text-align:center;
41        float: left;
42        left:0;
43        margin: 5px 0 5px 2px;
44      }
45      .ctr {
46        background: lightgray;
47        width: 100%;
48        padding-right: 15px;
49        padding-left: 15px;
50        margin-right: auto;
51        margin-left: auto;
52        max-width: 960px;
53      }
54     .text-center{text-align:center;}
55   </style>
56 </body>
57 </html>

困っていること

昨日からvueを勉強し始めて1点困っていることがあります。
初歩的な部分かもしれませんがご教示いただけると幸いです。
divの要素でリストを囲っているに適用されずに困っています。

kei344

2019/12/20 07:17

タイトルとコードが違います。修正してください。

行動規範の内容に同意します

回答1件

ベストアンサー

<div class="container">は見当たりませんが<div class="ctr">だと仮定して、
ulが<div class="ctr">内にあるはずなのに飛び出している　という状況でしょうか。
float: left;が原因だと思うので、floatを解除したりfloatを使わずFlexboxにしてみたりで対応できると思います。

投稿2019/12/20 07:23