Question

我是一个初学者，这就是为什么我找不到答案，因为我不知道我需要用什么来搜索条件。

现在我有一张表格

        <form action="#" method="POST">
            <div id="labels">
    <label>CMS Systeem</label><p>
    <label>Responsive Design</label><p>
    <label>Google Pakket+</label><p>
    <label>Google Ranking</label><p>
    <label>Slider/Diavoorstelling</label><p>
    <label>Social Media</label><p>

<div id="input">
<input type="text" name="pagina" value="1"><p>
Ja<input type="radio" name="cms" id="cmsja" value="ja"/> Nee<input type="radio" name="cms" value="nee" id="cmsnee" checked/><p />
Ja<input type="radio" name="Responsive" value="ja"/> Nee<input type="radio" name="Responsive" value="nee" checked/><p />
Ja<input type="radio" name="Googlep" value="ja"/> Nee<input type="radio" name="Googlep" value="nee" checked/><p />
Ja<input type="radio" name="Googletop" value="ja"/> Nee<input type="radio" name="Googletop" value="nee" checked/><p />
Ja<input type="radio" name="slider" value="ja"  /> Nee<input type="radio" name="slider" value="nee" checked/><p />
Ja<input type="radio" name="socials" value="ja" id="mediaja" /> Nee<input type="radio" name="socials" value="nee" id="medianee" checked/><p />
            </div>
    </form>

我想要

#input {
      next to #labels instead of under #input

}

我用margin: -xxxpx;解决了这个问题，但我知道这不是一个很好的方法。

的jsfiddle http://jsfiddle.net/tAVGC/

Answer 1

http://jsfiddle.net/BURR2/

#labels { float: left; margin-right: 10px; }

另外，请关闭您的代码。

作为关于id的样式的附注，我建议改用类。 Chris Coyier的This article是一个很好的，并且链接了一些其他好的资源。

Answer 2

夫妻俩：

您的<div id="labels" >需要</div>结束标记。

此外，<p>代码需要一个开放和结束标记，例如<p></p>

如果您希望将它们排成一行，那么您需要在每个元素中保持一致<p>标记。理想情况下，您希望标记是这样的：

<label>CMS System</label><input type="radio" name="cms" />

所以他们会在HTML和视觉上并排。但是，如果您需要在两个单独的<div>容器中使用它们，请尝试以下方法：

http://jsfiddle.net/sk6gz/1/

它们之间似乎存在差异，因此要么在第一个或第二个<p>容器中添加额外的<div>，以便获得我相信您正在寻找的内容。

Answer 3

更优雅，标记更少

label{
display:inline-block;
width:150px;
}

http://jsfiddle.net/tAVGC/10/

Answer 4

看起来你正试图制作某种CMS？

首先，要了解如何使用CSS定位元素，我会搜索css box model这些术语。这应该会产生一些很好的结果，解释如何将elemenst放在彼此旁边。

现在问题就在眼前。我猜你想要这样的东西： JSFiddle

您首先将所有标签放在标记中，然后放置所有控件（单选按钮），但这里的关键是将它们组合在一起：每个问题的标签和控件：

<label>CMS Systeem</label>
Ja<input type="radio" name="cms" id="cmsja" value="ja"/> 
Nee<input type="radio" name="cms" value="nee" id="cmsnee" checked="checked" />
<br/>

我在这里使用了一个<br/>元素，它有点快速和肮脏。上述盒子模型可以更好地控制定位。

我还认为您应该搜索html forms

之类的内容

最后，作为初学者，CMS可能有点雄心勃勃。为什么不从小开始？

Answer 5

对于表单元素，这种事情可以很好地运行：

HTML：

<label>CMS System</label><input type="radio" name="cms" />
<label>Your feelings</label><input type="text" name="feelings" />

CSS：

label, input[type=text] { display:inline-block; text-align: right; }
label { width: 30%; margin-right: 2%; }
input, input[type=text] { width: 60%; }

收音机输入不需要宽度，但是我把文本输入放在一起，以显示你如何为表格加油。

请参阅此处的示例：http://jsfiddle.net/harveyramer/E7kSt/

将2个div放在一起

5 个答案:

HTML：

CSS：