德爾馬特單選按鈕新行文字

Question

我是新手，我使用的是最新版本的joomla。我無法使用virtmart自定義字段中的單選按鈕。 Firefox中的單選按鈕，如下圖所示：

但在鉻，他們看起來是不同的。每行有一個無線電，然後是文本，然後是無線電。

我希望它看起來像這樣：

此外，當標籤名稱很長，但不是那麼好當的標籤名稱是達不到這個效果很好。

.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和Chrome之間的不兼容性令人沮喪。

Answer 1

您可以將單選按鈕包裹在另一個標籤內並使其顯示塊，以便將該項目堆疊起來。

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> 

DIV的，你不需要顯示：塊屬性