0

我正在使用 SimpleForms 在 Joomla 2.5 站点上发布表单。

问题是复选框和选项位于两行不同的行

生成的html是：

<form method="post" id="simpleForm2_142" name="simpleForm2_142" enctype="multipart/form-data" class="simpleForm">
<input type="hidden" name="moduleID" value="142" autocomplete="off">
<input type="hidden" name="task" value="sendForm" autocomplete="off">
<input type="hidden" name="Itemid" value="230" autocomplete="off">
<input type="hidden" name="url" value="http://xxx" autocomplete="off">
<style type="text/css">
form.simpleForm label{display:block;}
form.simpleForm label span{color:#ff0000;}
form.simpleForm input.inputtext{width:215px;}
form.simpleForm textarea.inputtext{width:215px;height:100px;}
form.simpleForm textarea.inputtext_small{width:215px;height:50px;}
</style>
<p><label for="sf2_142_nom">Nom <span>*</span></label> <input type="text" name="sf2_142_nom" id="sf2_142_nom" class="inputtext" value="" autocomplete="off"></p>
<p><label for="sf2_142_prnom">Prénom <span>*</span></label> <input type="text" name="sf2_142_prnom" id="sf2_142_prnom" class="inputtext" value="" autocomplete="off"></p>
<p><label for="sf2_142_adresse">Adresse <span>*</span></label> <textarea name="sf2_142_adresse" id="sf2_142_adresse" class="inputtext"></textarea></p>
<div class="chkbox"><label for="sf2_142_label">Label</label> 
<input type="checkbox" name="sf2_142_label[]" id="a7c1272bf8f1dfd06b1d0f85e31ac1b1" value="option1" autocomplete="off"> 
<label for="a7c1272bf8f1dfd06b1d0f85e31ac1b1">option1</label>
<input type="checkbox" name="sf2_142_label[]" id="29def0c43615fa46358f41e04e9b07ee" value="option2" autocomplete="off"> 
<label for="29def0c43615fa46358f41e04e9b07ee">option2</label>
</div>
<p><input type="submit" value="Envoyer" autocomplete="off"></p>
</form>

我想用一些 CSS 让它们保持在一条线上

欢迎任何提示！

编辑：我正在为 Joomla 使用 simpleforms 2 - 这是此扩展程序的主页：http: //allforjoomla.com/xmodules/mod-simpleform2

编辑 2：

抱歉，在回答您的答案时，我没有弄清楚 - 只要我想输入一个新行，它就会保存我的答案 - 所以我在这里编辑：

感谢您的回答，但如果我这样做，我将在一行中得到所有这些：

Label <checkbox> option1 <checkbox> option2

我想得到：

Label 
<checkbox> option1 
<checkbox> option2

编辑 3：

它更好：

form.simpleForm label:first-child { display: block; }

但我得到：

Label 
<checkbox> option1 <checkbox> option2

这就是我试图得到的：

Label 
<checkbox> option1 
<checkbox> option2
4

2 回答 2

0

你可以删除这一行：

form.simpleForm label {
    display: block;
}

或者，如果您想将第一个标签（如下面的注释中所述）保留为块元素，请改为执行以下操作：

form.simpleForm label:first-child {
    display: block;
}
于 2013-05-30T23:55:11.593 回答
0

使元素内联将是您的问题。

form.simpleForm label, form.simpleForm div.chkbox input{ display:inline !important}
于 2013-05-31T05:31:16.147 回答