0

好的，所以我的问题很简单有没有办法使复选框列表居中，但将复选框保持在一行而不是波形？这是我现在所拥有的。

     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 打开，你应该能够看到我在说什么。提前致谢。

4

5 回答 5

1

您在 a 中拥有每个复选框div，该复选框具有属性display:block，因此它们出现在新行上。要么更改标记，然后删除每个div包裹在复选框周围的东西。或者在包含复选框的元素上设置display:inline-blockor 。float:leftdiv

jsFiddle 演示- 最简单的选项 - 删除divs每个复选框。

如果我误解了，并且您希望它们垂直排列，请参阅这个 jsFiddle 演示。

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

  • <center>很快就会贬值，如果还没有的话..
  • 您不能将其html放入head标签中。
  • 你没有关闭大多数标签..
于 2013-10-08T19:19:06.930 回答
1
  1. 您正在使用居中<center>...首先删除开始/结束 CENTER 标签。
  2. 以结束 DIV 结束所有起始 DIV。
  3. 在每个 DIV 中，添加一个样式style="text-align:left;"
于 2013-10-08T19:19:35.987 回答
1

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

我认为您可以通过列出它们然后将列表项向左对齐来使复选框居中：

 <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>

Width = 100px 使整个列表可居中对齐，文本对齐会影响项目，因此它们是左对齐的。我添加了一个边框，所以你可以看到发生了什么。

如果您删除 <CENTER> 标记并应用一些 CSS 使整个列表居中，那就太好了。

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

于 2013-10-08T19:27:42.533 回答
1

从字面上看，您有数百种方法可以实现您的要求。鉴于您的学习水平和方法，我建议您这样做：

<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>

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

于 2013-10-08T19:35:33.603 回答
1

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>
于 2013-10-08T19:43:27.037 回答