Question

好吧所以我的问题很简单，有没有办法集中一个复选框列表但是将复选框保留在一行而不是波形图案？这就是我现在所拥有的。

     html>
     <Head>
     <center>
     <div style="background-color:grey;color:black;border:5px solid black;width:600px;height:500px;font-size:18px;">
     <H1>Select a program you want to run.</H1>
     <A href="file://C:\Windows/notepad.exe">Notepad</a>
     <div>
     <a href="file://D:\My Documents">Documents</a>
     <div>
     <a href="file://D:\Desktop\Student Applications">programs</a>
     <div>
     <a href="http://pilot.wright.edu">Pilot</a>
     <div>
     <form>
     <input type="checkbox" oncheck="file://D:\My Documents\1 CCE">CCE</input>
     <div>
     <input type="checkbox">A3</input>
     <div>
     <input type="checkbox">CR</input>
     <div>
     <input type="checkbox">CPR</input>
     <div>
     <input type="checkbox">MM</input>
     <div>
     <input type="checkbox">IR</input>
     <div>
     <button type="submit" id="34">SUBMIT</button>
     </form>
     </center>
     </head>
     </html>

一旦你打开它作为HTML，你应该能够看到我在说什么。提前谢谢。

Answer 1

您拥有div内的每个复选框，其中包含属性display:block，因此它们会显示在新行上。更改标记，然后删除复选框周围的每个div ..或在包含复选框的display:inline-block元素上设置float:left或div。

jsFiddle demo - 最简单的选项 - 移除每个复选框周围的divs。

如果我误解了，你希望它们垂直排列see this jsFiddle demo。

除此之外，还有一些严重的语法错误需要修复。

<center>很快就会被折旧，如果不是的话......
您无法将html放入head标记。
您没有关闭大部分代码..

Answer 2

您正在使用居中<center> ...首先删除开头/结尾CENTER标记。
结束所有以DIV结尾的DIV。
在每个DIV中，添加样式style="text-align:left;"

Answer 3

您的代码存在一些问题，您需要将代码放在＆lt; body＆gt;中。标签内＆lt; html＆gt;标签。每个＆lt; div＆gt;您打开的标记需要使用＆lt; / div＆gt;关闭使用＆lt; br /＆gt;标记或替换它们标签

我认为您可以通过列出它们然后将列表项对齐到左侧来对齐您的复选框：

 <ul style='width:100px; list-style:none; border:1px solid black; text-align:left;'>
 <li><input type="checkbox" oncheck="file://D:\My Documents\1 CCE">CCE</input></li>
 <li><input type="checkbox">A3</input></li>
 <li><input type="checkbox">CR</input></li>
 <li><input type="checkbox">CPR</input></li>
 <li><input type="checkbox">MM</input></li>
 <li><input type="checkbox">IR</input></li>
 </ul>

宽度= 100px使整个列表可以对齐到中心，text-align会影响项目，因此它们是左对齐的。我添加了边框，以便您可以看到最新情况。

如果你删除＆lt; CENTER＆gt;会很好。标记并应用一些CSS来整列整个列表。

你可以试试这个小提琴：http://jsfiddle.net/cdZ6x/

Answer 4

您可以通过数百种方式实现您的要求。根据您的学习水平和方法，我建议您：

<html>
     <head>
        <style type="text/css">
            #checkboxOptions {
                width: 100px;
                margin: 0 0 0 50px;
                border:5px solid red;
                text-align: left;
            }
        </style>
     </head>
     <center>
         <div style="background-color:grey;color:black;border:5px solid black;width:600px;height:500px;font-size:18px;">
             <h1>Select a program you want to run.</h1>
             <a href="file://C:\Windows/notepad.exe">Notepad</a>
             <br />
             <a href="file://D:\My Documents">Documents</a>
             <br />
             <a href="file://D:\Desktop\Student Applications">programs</a>
             <br />
             <a href="http://pilot.wright.edu">Pilot</a>
             <br />
             <form>
                 <div id='checkboxOptions'>
                     <input type="checkbox" oncheck="file://D:\My Documents\1 CCE">CCE</input>
                     <br />
                     <input type="checkbox">A3</input>
                     <br />
                     <input type="checkbox">CR</input>
                     <br />
                     <input type="checkbox">CPR</input>
                     <br />
                     <input type="checkbox">MM</input>
                     <br />
                     <input type="checkbox">IR</input>
                 </div>
                 <button type="submit" id="34">SUBMIT</button>
             </form>
         </div>
     </center>
</html>

我已经纠正了我能找到的语法错误，并将相关的样式放入文档的head部分。我还在div周围添加了一个相当明显的边框，这样你就可以看到它在做什么了。使用width属性和margin属性来安排它的喜好。

Answer 5

CS_STEM：我要做的第一件事是确保你关闭所有的html元素。

如果你想将它们作为一个直线列表，那就把它作为一个列表而不是一堆div，如下所示：

<div class="checkbox-list">
<ul>
<li><input type="checkbox" oncheck="file://D:\My Documents\1 CCE">CCE</input></li>
<li><input type="checkbox">A3</input></li>
<li><input type="checkbox">CR</input></li>
<li><input type="checkbox">CPR</input></li>
<li><input type="checkbox">MM</input></li>
<li><input type="checkbox">IR</input></li>
</ul>
<button type="submit" id="34">SUBMIT</button>
</div>

它看起来更干净，其他程序员会很快看到你的意思:)。

另外，也许它应该放在体内。整个事情应该看起来更像：

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div style="background-color:grey;color:black;border:5px solid black;width:600px;height:500px;font-size:18px;">
<H1>Select a program you want to run.</H1>
<a href="file://C:\Windows/notepad.exe">Notepad</a>
<a href="file://D:\My Documents">Documents</a>
<a href="file://D:\Desktop\Student Applications">programs</a>
<a href="http://pilot.wright.edu">Pilot</a>
<div class="checkbox-list">
<ul>
<li><input type="checkbox" oncheck="file://D:\My Documents\1 CCE">CCE</input></li>
<li><input type="checkbox">A3</input></li>
<li><input type="checkbox">CR</input></li>
<li><input type="checkbox">CPR</input></li>
<li><input type="checkbox">MM</input></li>
<li><input type="checkbox">IR</input></li>
</ul>
<button type="submit" id="34">SUBMIT</button>
</div>
</div>
</body>
</html>

将网页复选框格式化为直线

5 个答案: