virtuemartのラジオボタンの改行テキスト

Question

私はコーディングに新しいです、私はjoomlaの最新バージョンを使用しています。私はvirtuemartのカスタムフィールドのラジオボタンに問題があります。 Firefoxでラジオボタンは次のようになります。

が、クロムでは、それらは異なった見えます。 1行に1つのラジオがあり、次にテキストにラジオがあります。

は、私はそれが次のようになりたい：ラベル名が短い場合にラベル名がありませんので、よく長いですが、とき

また、これはうまく動作します。

.radio, .checkbox { 
     padding-left: 18px; 
    } 
    label { 
     color: #333333; 
     margin-bottom: 5px; 
     max-width: 90%; 
    } 

label, input, button, select, textarea { 
    font-weight: normal; 
    display: inline; 
} 
input[type="radio"], input[type="checkbox"] { 
    display: block; 
    margin-right: 10px; 
    border: none; 
} 
layout.css:252 
input[type="image"], input[type="checkbox"], input[type="radio"] { 
    border-radius: 0; 
    cursor: pointer; 
    height: auto; 
    line-height: normal; 
    margin: 3px 0; 
    padding: 0; 
    width: auto; 
} 
layout.css:247 
label input, label textarea, label select { 
    display: block; 
} 
layout.css:294 
input, textarea { 
    -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; 
} 
layout.css:231 
input, textarea, select, #advanced-search-toggle, input.search-query { 
    border: 1px solid #CCCCCC; 
    border-radius: 3px; 
    display: inline-block; 
    margin-bottom: 9px; 
    padding: 4px; 
} 
layout.css:220 
label, input, button, select, textarea { 
    font-weight: normal; 
    display: inline; 
} 
user agent stylesheet 
input[type="radio" i] { 
    margin: 3px 3px 0px 5px; 
} 
user agent stylesheet 
input[type="radio" i] { 
    -webkit-appearance: radio; 
    box-sizing: border-box; 
} 
user agent stylesheet 
input[type="radio" i], input[type="checkbox" i] { 
    background-color: initial; 
    margin: 3px 0.5ex; 
    padding: initial; 
    border: initial; 
} 
user agent stylesheet 
input { 
    -webkit-appearance: textfield; 
    background-color: white; 
    -webkit-rtl-ordering: logical; 
    user-select: text; 
    cursor: auto; 
    padding: 1px; 
    border-width: 2px; 
    border-style: inset; 
    border-color: initial; 
    border-image: initial; 
} 
user agent stylesheet 
input, textarea, select, button { 
    text-rendering: auto; 
    color: initial; 
    letter-spacing: normal; 
    word-spacing: normal; 
    text-transform: none; 
    text-indent: 0px; 
    text-shadow: none; 
    display: inline-block; 
    text-align: start; 
    margin: 0em; 
    font: 13.3333px Arial; 
} 
user agent stylesheet 
input, textarea, select, button, meter, progress { 
    -webkit-writing-mode: horizontal-tb; 
} 

私はここでの提案の多くを試してみましたが、変更は、何か別の休憩ダウンを行っている時はいつでも。 Firefoxとクロムの間の非互換性もイライラしています。

Answer 1

ラジオボタンを別のタグの中にラップして表示ブロックにすると、アイテムが積み重なることがあります。

ディスプレイを必要としないのdivでHTML

<div><input type="radio" name="gender" value="male" checked> Male</div> 
<div><input type="radio" name="gender" value="female"> Female</div> 
<div><input type="radio" name="gender" value="other"> Other</div> 

：ブロックプロパティ