2017-06-03 242 views
0

我想弄清楚爲什麼與「コンシルジュ」的div有不同的頂部比包含「警備」和「洗濯」的div。您必須真正運行代碼片段來查看我的意思,但是在第一行中,第一行的第二行和第三個div上面的頂部3像素在該行上......我爲此感到茫然。這是語言的東西嗎?從自然的角度來看,我如何讓他們擁有同樣的頂級?我不想使用JavaScript來迫使頂部是相同的,因爲我使用的頂部值已經確定內容的div是哪一行,這樣可能會成爲循環。爲什麼這些日文字符有不同的最高值?

有一個這樣的英文版本,其中唯一的區別是內容的空話和英語(普通話和韓語),我沒有這個問題。這似乎是日語刻字獨一無二的東西,是否有我需要用日語來解釋的東西?

.DemoQuest { 
 
    text-align: center; 
 
    font-family: Verlag, Arial; 
 
    color: white; 
 
    background: black; 
 
} 
 

 
.DemoQuest .Span { 
 
    margin-right: 1%; 
 
    margin-left: 2.5%; 
 
    text-align: center; 
 
} 
 

 
.ResponseSet { 
 
    margin-left: 2%; 
 
    margin-right: 2%; 
 
} 
 

 
.DemoResp { 
 
    display: inline-block; 
 
    padding-top: .5%; 
 
    padding-bottom: .5%; 
 
    width: 32%; 
 
} 
 

 
.ResponseText { 
 
    display: none; 
 
} 
 

 
input { 
 
    display: none; 
 
} 
 

 
.DemoResp .Wrapper { 
 
    text-align: center; 
 
    vertical-align: top; 
 
    background-color: #C4C4C4; 
 
    border-radius: 3px; 
 
    color: black; 
 
    padding: 8px 8px; 
 
    padding-top: 8px; 
 
    transition-duration: 0.4s; 
 
    font-size: 16px; 
 
    vertical-align: middle; 
 
    -moz-user-select: none; 
 
    -webkit-user-select: none; 
 
    -ms-user-select: none; 
 
    -o-user-select: none; 
 
    user-select: none; 
 
    cursor: pointer; 
 
} 
 

 
.DemoQuest .DemoResp .Selector .Wrapper { 
 
    display: grid; 
 
}
<div id="d2929b66837440708d3db2ed658ca0c6" class="DemoQuest"> 
 
\t \t <div class="Span">以下、ホテル內でご利用いただいたサービスをお選び下さい</div> 
 
\t \t <div class="ResponseSet Below"> 
 
\t \t \t <div id="96e3902628074785a3065df70c644566" class="DemoResp"> 
 
\t \t \t \t <span class="Selector"><input type="checkbox" id="cb_96e3902628074785a3065df70c644566" name="cb_96e3902628074785a3065df70c644566" value="1"><div id="123" class="Wrapper"><div class="ResponseContent">コンシェルジュ</div></div></span> 
 
\t \t \t \t <span class="ResponseText">コンシェルジュ</span> 
 
\t \t \t </div> 
 
\t \t \t <div id="8d69877355cd4f05a4db3539c2f67fd6" class="DemoResp"> 
 
\t \t \t \t <span class="Selector"><input type="checkbox" id="cb_8d69877355cd4f05a4db3539c2f67fd6" name="cb_8d69877355cd4f05a4db3539c2f67fd6" value="1"><div id="123" class="Wrapper" for="cb_8d69877355cd4f05a4db3539c2f67fd6"><div class="ResponseContent">警備</div></div></span> 
 
\t \t \t \t <span class="ResponseText">警備</span> 
 
\t \t \t </div> 
 
\t \t \t <div id="de5a147b403f43568d44169142ae4a98" class="DemoResp"> 
 
\t \t \t \t <span class="Selector"><input type="checkbox" id="cb_de5a147b403f43568d44169142ae4a98" name="cb_de5a147b403f43568d44169142ae4a98" value="1"><div id="123" class="Wrapper" for="cb_de5a147b403f43568d44169142ae4a98"><div class="ResponseContent">洗濯</div></div></span> 
 
\t \t \t \t <span class="ResponseText">洗濯</span> 
 
\t \t \t </div> 
 
\t \t \t <div id="346cb8895aa34c4ebf879814f197e866" class="DemoResp"> 
 
\t \t \t \t <span class="Selector"><input type="checkbox" id="cb_346cb8895aa34c4ebf879814f197e866" name="cb_346cb8895aa34c4ebf879814f197e866" value="1" ><div id="123" class="Wrapper" for="cb_346cb8895aa34c4ebf879814f197e866"><div class="ResponseContent" style="height: 52px; top: 13px;">お土産屋</div></div></span> 
 
\t \t \t \t <span class="ResponseText">お土産屋</span> 
 
\t \t \t </div> 
 
\t \t \t <div id="6750438a3faf49a8afbbca7c23289a42" class="DemoResp"> 
 
\t \t \t \t <span class="Selector"><input type="checkbox" id="cb_6750438a3faf49a8afbbca7c23289a42" name="cb_6750438a3faf49a8afbbca7c23289a42" value="1" ><div id="123" class="Wrapper"><div class="ResponseContent">バンニャンツリースパ</div></div></span> 
 
\t \t \t \t <span class="ResponseText">バンニャンツリースパ</span> 
 
\t \t \t </div> 
 
\t \t \t <div id="fd64fa6d551848d18943f7210633045b" class="DemoResp"> 
 
\t \t \t \t <span class="Selector"><input type="checkbox" id="cb_fd64fa6d551848d18943f7210633045b" name="cb_fd64fa6d551848d18943f7210633045b" value="1"><div id="123" class="Wrapper" for="cb_fd64fa6d551848d18943f7210633045b"><div class="ResponseContent">フィットネスセンター</div></div></span> 
 
\t \t \t \t <span class="ResponseText">フィットネスセンター</span> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

+0

萬一有人運行到這個問題,並認爲這是一個假名v漢字的問題,其實不然。 – neogeek23

回答

1

正如我明白了,你必須添加vertical-align: top.DemoResp css來解決這個問題。

.DemoResp { 
    display: inline-block; 
    padding-top: .5%; 
    padding-bottom: .5%; 
    width: 32%; 
    vertical-align: top; 
} 
+0

這工作,但你知道我爲什麼要做這個日本其他語言的時候,我不就得了? – neogeek23

+1

可能是這是您用於日語的字體問題,可能是我錯了。但是,如果你正在使用'顯示:直列block'那麼你必須用'CSS的垂直align'財產對稱排列的內聯元素。 – Bhuwan

+0

再次感謝,這正是錯誤的地方。它必須是我用的字體。我想Verlag的日語有點奇怪。 – neogeek23

0

.DemoQuest { 
 
    text-align: center; 
 
    font-family: Verlag, Arial; 
 
    color: white; 
 
    background: black; 
 
} 
 

 
.DemoQuest .Span { 
 
    margin-right: 1%; 
 
    margin-left: 2.5%; 
 
    text-align: center; 
 
} 
 

 
.ResponseSet { 
 
    margin-left: 2%; 
 
    margin-right: 2%; 
 
} 
 

 
.DemoResp { 
 
    display: inline-block; 
 
    padding-top: .5%; 
 
    padding-bottom: .5%; 
 
    width: 32%; 
 
} 
 

 
.ResponseText { 
 
    display: none; 
 
} 
 

 
input { 
 
    display: none; 
 
} 
 

 
.DemoResp .Wrapper { 
 
    text-align: center; 
 
    vertical-align: top; 
 
    background-color: #C4C4C4; 
 
    border-radius: 3px; 
 
    color: black; 
 
    height: 30px; /* <-- this is what i have add*/ 
 
    padding: 8px 8px; 
 
    padding-top: 8px; 
 
    transition-duration: 0.4s; 
 
    font-size: 15px; 
 
    -moz-user-select: none; 
 
    -webkit-user-select: none; 
 
    -ms-user-select: none; 
 
    -o-user-select: none; 
 
    user-select: none; 
 
    cursor: pointer; 
 
} 
 

 
.DemoQuest .DemoResp .Selector .Wrapper { 
 
    display: grid; 
 
}
<div id="d2929b66837440708d3db2ed658ca0c6" class="DemoQuest"> 
 
\t \t <div class="Span">以下、ホテル內でご利用いただいたサービスをお選び下さい</div> 
 
\t \t <div class="ResponseSet Below"> 
 
\t \t \t <div id="96e3902628074785a3065df70c644566" class="DemoResp"> 
 
\t \t \t \t <span class="Selector"><input type="checkbox" id="cb_96e3902628074785a3065df70c644566" name="cb_96e3902628074785a3065df70c644566" value="1"><div id="123" class="Wrapper"><div class="ResponseContent">コンシェルジュ</div></div></span> 
 
\t \t \t \t <span class="ResponseText">コンシェルジュ</span> 
 
\t \t \t </div> 
 
\t \t \t <div id="8d69877355cd4f05a4db3539c2f67fd6" class="DemoResp"> 
 
\t \t \t \t <span class="Selector"><input type="checkbox" id="cb_8d69877355cd4f05a4db3539c2f67fd6" name="cb_8d69877355cd4f05a4db3539c2f67fd6" value="1"><div id="123" class="Wrapper" for="cb_8d69877355cd4f05a4db3539c2f67fd6"><div class="ResponseContent">警備</div></div></span> 
 
\t \t \t \t <span class="ResponseText">警備</span> 
 
\t \t \t </div> 
 
\t \t \t <div id="de5a147b403f43568d44169142ae4a98" class="DemoResp"> 
 
\t \t \t \t <span class="Selector"><input type="checkbox" id="cb_de5a147b403f43568d44169142ae4a98" name="cb_de5a147b403f43568d44169142ae4a98" value="1"><div id="123" class="Wrapper" for="cb_de5a147b403f43568d44169142ae4a98"><div class="ResponseContent">洗濯</div></div></span> 
 
\t \t \t \t <span class="ResponseText">洗濯</span> 
 
\t \t \t </div> 
 
\t \t \t <div id="346cb8895aa34c4ebf879814f197e866" class="DemoResp"> 
 
\t \t \t \t <span class="Selector"><input type="checkbox" id="cb_346cb8895aa34c4ebf879814f197e866" name="cb_346cb8895aa34c4ebf879814f197e866" value="1" ><div id="123" class="Wrapper" for="cb_346cb8895aa34c4ebf879814f197e866"><div class="ResponseContent" style="height: 52px; top: 13px;">お土産屋</div></div></span> 
 
\t \t \t \t <span class="ResponseText">お土産屋</span> 
 
\t \t \t </div> 
 
\t \t \t <div id="6750438a3faf49a8afbbca7c23289a42" class="DemoResp"> 
 
\t \t \t \t <span class="Selector"><input type="checkbox" id="cb_6750438a3faf49a8afbbca7c23289a42" name="cb_6750438a3faf49a8afbbca7c23289a42" value="1" ><div id="123" class="Wrapper"><div class="ResponseContent">バンニャンツリースパ</div></div></span> 
 
\t \t \t \t <span class="ResponseText">バンニャンツリースパ</span> 
 
\t \t \t </div> 
 
\t \t \t <div id="fd64fa6d551848d18943f7210633045b" class="DemoResp"> 
 
\t \t \t \t <span class="Selector"><input type="checkbox" id="cb_fd64fa6d551848d18943f7210633045b" name="cb_fd64fa6d551848d18943f7210633045b" value="1"><div id="123" class="Wrapper" for="cb_fd64fa6d551848d18943f7210633045b"><div class="ResponseContent">フィットネスセンター</div></div></span> 
 
\t \t \t \t <span class="ResponseText">フィットネスセンター</span> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

相關問題