在div之間移動html而不會干擾wordpress表格中的底部div生成的代碼

我有一些WP會員插件生成的html，我無法更改，並且遇到了樣式問題。在div之間移動html而不會干擾wordpress表格中的底部div生成的代碼

<div class="button_div"> 
    <input name="rememberme" type="checkbox" id="rememberme" value="forever"> 
     "&nbsp;Remember Me&nbsp;&nbsp;" 
    <input type="submit" name="submit" value="LogIn" class="buttons"> 
</div>

我需要移動第一輸入複選框和「記住我」文本的左側，但只能單獨目標的複選框，或者整個button_div與薩斯/ CSS。有沒有一種方式與Javascript或其他技術來移動複選框和記住我的文本，而無需移動提交按鈕？

來源

2015-12-23 Virge Assault

可能是拼寫錯誤。應該有一個「in id屬性，比如id =」rememberme「，你還想在哪裏保留提交按鈕？你想要將這兩個輸入放在一行還是一個放在另一行上？同樣，這兩個輸入需要留下alinged？ – brk

我已經更新了我的答案，因爲您無法編輯原始HTML。我建議的解決方案使用JavaScript來覆蓋原有的HTML，並且可以根據需要設計樣式。

試試這個：

<!-- Your original HTML. --> 
 

 
<div class="button_div"> 
 
    <input name="rememberme" type="checkbox" id="rememberme" value="forever">"&nbsp;Remember Me&nbsp;&nbsp;" 
 
    <input type="submit" name="submit" value="LogIn" class="buttons"> 
 
</div> 
 

 
<!-- A script that replaces the button_div contents with HTML that you should be able to work with. --> 
 
<script> 
 
    divs = document.getElementsByClassName('button_div'); 
 

 
    [].slice.call(divs).forEach(function(div) { 
 
    div.innerHTML = '<div id="container"><div class="checkbox_div"><input name="rememberme" type="checkbox" id="rememberme" value="forever">"&nbsp;Remember Me&nbsp;&nbsp;"</div><div class="button_div"><input type="submit" name="submit" value="LogIn" class="buttons"></div></div>'; 
 
    }); 
 
</script> 
 

 
<!-- An example of how you might style your elements. --> 
 
<style type="text/css"> 
 
    .checkbox_div { 
 
    position: relative; 
 
    top: 100px; 
 
    left: 100px; 
 
    } 
 
    .button_div { 
 
    position: relative; 
 
    left: 20px; 
 
    }

希望這有助於。

*更新：我想清楚這是如何工作的 - 因爲這看起來有點神祕 - 對於這篇文章的未來觀衆。（理解這只是解決這個問題的一個例子）。

首先，我們從getElementsByClassName（class）中得到一個類似數組的對象，並將它分配給div。
接下來我們從div創建一個數組（[]只是一個新數組的簡寫），以便我們可以循環訪問forEach。（我們必須這樣做，因爲getElementsByClassName（）返回一個「類似數組」的對象而不是實際的數組， HTML。

下面是其他一些參考：

來源

2015-12-23 03:13:49

我不能編輯html，它是由一個插件生成的 –

我更新了我的答案，以提供一個潛在的javascript解決方案，看看它是否適用於您，有效地解決了這個問題。 button_div類，這樣你就可以使用它了，希望這會有幫助 –

這是我在S/O上得到的最酷的迴應，我不知道你可以用JS做到這一點，修正了一切，謝謝！ –

建立這個正確的方法是用包裹在標籤中的文本，你可以用類目標或. button_div input[type="checkbox"] + label但我假設你無法更改HTML。所以我唯一的解決方法是將輸入浮動到左側，將按鈕浮動到右側或將按鈕放置在相對位置，並按需要放置儘可能多的px。使用媒體查詢重新調整。這是我在按鈕上浮動的解決方案。

.button_div{ 
     color:red; 
     position:relative; 
     left:-20px; 
     right:auto; 
     width:600px; 
    } 

    .btn{ 
    float:right; 
    }

見我的DEMO here

來源

2015-12-23 03:14:32 LOTUSMS

首先出現的是在ID attribute.It錯字應id="rememberme" 其次是更好，當我們使用input type="radio/checkbox"使用label -attribute。這樣

HTML 按鈕&輸入所以我已經修改旅遊代碼是同一行

<div class="button_div"> 
<input name="rememberme" type="checkbox" class="pull-left" id="rememberme" value="forever"><label for ="rememberme">Remember Me</label> 
<input type="submit" class="pull-right" name="submit" value="LogIn" class="buttons"> 
</div>

在不同線路

<div class="wrapper"> 
<div class="button_div"> 
<input name="rememberme" type="checkbox" class="pull-left" id="rememberme" value="forever"><label for ="rememberme">Remember Me</label> 
</div> 
<div class="button_div"><input type="submit" name="submit" value="LogIn" class="buttons"> 
</div> 
</div>

CSS

.button_div{ 
    width:500px; 
    background:green; 
    padding:10px; 
} 
.pull-left{ 
    float:left; 
} 
.pull-right{ 
    float:right; 
}

WORKING DEMO

來源

2015-12-23 03:38:53 brk

在div之間移動html而不會干擾wordpress表格中的底部div生成的代碼

回答

相關問題