用css更改位置（翻轉）兩個元素

我有以下div其中包含一個輸入和一個標籤。用css更改位置（翻轉）兩個元素

<div class="js-form-item "> 

    <input type="checkbox" id="checkboxes-11" class="type-checkboxes form-checkbox"> 

    <label for="option-a-checkboxes-11" class="option"> 
     Factures 11chf 
    </label> 

    <div class="option-price-style"> </div> 
</div>

輸入顯示在標籤之前，但我試圖顛倒順序，以便標籤可以出現在輸入之前。我試過這樣做，使輸入display:block，並與margin-bottom:1px向下拉，但它不起作用

來源

2017-07-24 hidar

你不能簡單地扭轉秩序嗎？ – WookieCoder

它由CMS生成，不能從那裏完成。 – hidar

這是你想要的https://jsfiddle.net/DChandraShekhar/qzdpwv1L/1/ –

如果您將它們設置爲float: right它們將以相反的順序出現。

如果由於例如您希望將它們垂直堆疊而導致不能獲得所需的結果，則可以使用邊距或填充來更改元素的位置。

來源

2017-07-24 15:57:55 poepje

不，標籤不翻轉。它仍然在底部 – hidar

我想你不能顛倒順序，因爲你的CSS看起來有點像這樣：

input > label {}

有一種方法可以做到這一點使用Flexbox的雖然：

div { 
    display: flex; 
    flex-direction: column; 
} 
input { 
    order: 2; 
} 
label { 
    order: 1; 
}

https://jsfiddle.net/nzzqehog/2/

來源

2017-07-24 16:02:43 Chrisstar

他們並排。我試圖做顯示：塊，寬度：100％爲每個元素，但它不起作用 – hidar

對我來說，它的工作原理，考慮分享你的整個代碼 – Chrisstar

你可以看到小提琴不起作用。他們並排 – hidar

用css更改位置（翻轉）兩個元素

回答

相關問題