当前位置： 文江博客话题详情

为什么隐藏的文本输入框显示在下方而不是右侧？

发布于 2024-09-10 20:36:27 字数 9714 浏览 3 评论 0原文

当我将代码拆分到新页面（并重新组织问题）时，我发现了一个奇怪的错误。抱歉，如果我的代码很草率，当我开始将 CSS 和 jQuery 纳入我的知识库时，我已经做了很多重新学习...上次我制作一个带有表格的网站是在高中的时候。

无论如何，我遇到的问题是当参与者单击复选框时会显示隐藏的输入文本框（指定的文本框）。当我最初在 Firefox 和 IE 中测试代码时，会发生什么情况：复选框正确地取消隐藏在复选框项目的右侧。

但是，现在输入框出现在复选框下方！我该如何解决这个问题？

CSS代码：

#inputArea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    background-color: #d6e5f4;
    padding: 10px;
}

#inputArea input[type="text"], #inputArea textarea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    border: solid 1px #85b1de;
    width: 300px;
    background-color: #EDF2F7;
} 

div.row label:hover {
    background:#FFFF66;
    cursor:pointer;
}


.prestyle {
  display: inline;
  font-size:14.4px;
  font-family: Arial, Helvetica, sans-serif;
}


.indent { margin-left: 50px; }

p.page {
    text-align:center;
    font-size:20px;
}

.italic {font-style:italic;}

.blacktext {
    font: 14pt sans-serif;
    letter-spacing 2pt;
    color: #000000
}


#inputArea input[type="text"]:focus, #inputArea textarea:focus
{
    background-image: none;
    background-color: #ffffff;
    border: solid 1px #33677F;
}

body
{
background-color: #d6e5f4;
}


</style>

JavaScript/JQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            $('#Yes_Computer1').hide();

            $('#Yes_Computer').click(function () {
                $('#Yes_Computer1').toggle(400);
            });
        });
        $(document).ready(function () {
            $('#No_Computer').click(function () {
                $('#Yes_Computer1').hide();

            });
        });     
        $(document).ready(function () {
            $('#showLinuxSpecify').hide();

            $('#Linux').click(function () {
                $('#showLinuxSpecify').toggle(400);
            });
        });
        $(document).ready(function () {
            $('#showOSXspecify').hide();

            $('#OSX').click(function () {
                $('#showOSXspecify').toggle(400);
            });
        });
        $(document).ready(function () {
            $('#showWindowsSpecify').hide();

            $('#Windows').click(function () {
                $('#showWindowsSpecify').toggle(400);
            });
        });     
        $(document).ready(function () {
            $('#showOtherOSSpecify').hide();

            $('#OtherOS').click(function () {
                $('#showOtherOSSpecify').toggle(400);
            });
        });     
        $(document).ready(function () {
            $('#showhidetarget5').hide();

            $('#OtherBrowser').click(function () {
                $('#showhidetarget5').toggle(400);
            });
        });         
</script>

主体：

<body>
<form name="Background" method="post" action="http://localhost/background.php">

<fieldset>
<div id="inputArea">


<div class="blacktext">8. Do you have a computer at home?</div>
<div class="row">
<pre class="prestyle">
    <span><input type="radio" name="Home_Computer" value="Yes" id="Yes_Computer" onclick=""><label for="Yes_Computer" id="Yes_Computer-ariaLabel">Yes</label></span>
    <span><input type="radio" name="Home_Computer" value="No" id="No_Computer" onclick=""><label for="No_Computer" id="No_Computer-ariaLabel">No</label></span>
</pre>
</div>
<br />
<span id="Yes_Computer1">
<div class="blacktext">8a. What type of internet connection do you use at home?  <span class="italic">Please check all that apply</span>.</div>
<div class="row">
<pre class="prestyle">
    <span><input type="checkbox" name="modem" value="Cable" id="Cable" aria-labelledby="Cable-ariaLabel"> <label for="Cable" id="Cable-ariaLabel">Cable Service</label></span>  
    <span><input type="checkbox" name="modem" value="Dial-up" id="Dial-up" aria-labelledby="Dial-up-ariaLabel"> <label for="Dial-up" id="Dial-up-ariaLabel">Dial-up Service</label></span>      
    <span><input type="checkbox" name="modem" value="DSL" id="DSL" aria-labelledby="DSL-ariaLabel"> <label for="DSL" id="DSL-ariaLabel">DSL Service</label></span>      
    <span><input type="checkbox" name="modem" value="SatelliteDish" id="SatelliteDish" aria-labelledby="SatelliteDish-ariaLabel"> <label for="SatelliteDish" id="SatelliteDish-ariaLabel">Satellite Dish Service</label></span>     
    <span><input type="checkbox" name="modem" value="FiberOptic" id="FiberOptic" aria-labelledby="FiberOptic-ariaLabel"> <label for="FiberOptic" id="FiberOptic-ariaLabel">Fiber-Optic Service</label></span>       
    <span><input type="checkbox" name="modem" value="MobileBroadband" id="MobileBroadband" aria-labelledby="MobileBroadband-ariaLabel"> <label for="MobileBroadband" id="MobileBroadband-ariaLabel">Mobile Broadband Plan for a Computer or Cell Phone</label></span>       
</pre>
</div>
<br />
<div class="blacktext">8b. Browsers are software on a computer used to surf the Internet.  Last month, which Internet browser did you typically use at home?  <span class="italic">Please check all that apply</span>.</div>
<div class="row">
<pre class="prestyle">
    <span><input type="checkbox" name="modem" value="Firefox" id="Firefox" aria-labelledby="Firefox-ariaLabel"> <label for="Firefox" id="Firefox-ariaLabel">Firefox</label></span>  
    <span><input type="checkbox" name="modem" value="GoogleChrome" id="GoogleChrome" aria-labelledby="GoogleChrome-ariaLabel"> <label for="GoogleChrome" id="GoogleChrome-ariaLabel">Google Chrome</label></span>   
    <span><input type="checkbox" name="modem" value="InternetExplorer" id="InternetExplorer" aria-labelledby="InternetExplorer-ariaLabel"> <label for="InternetExplorer" id="InternetExplorer-ariaLabel">Internet Explorer</label></span>   
    <span><input type="checkbox" name="modem" value="Safari" id="Safari" aria-labelledby="Safari-ariaLabel"> <label for="Safari" id="Safari-ariaLabel">Safari</label></span>    
    <span><input type="checkbox" name="modem" value="OtherBrowser" id="OtherBrowser" aria-labelledby="OtherBrowser-ariaLabel"> <label for="OtherBrowser" id="OtherBrowser-ariaLabel">Other</label></span>       <span id="showhidetarget5"><label for="OtherBrowser_version" id="OtherBrowser_version-ariaLabel">Please specify:</label><input value="" id="OtherBrowser_version" name="OtherBrowser_version" type="text" aria-labelledby="OtherBrowser_version-ariaLabel" style="width:150px"></span></pre>
</div>
<br />
<div class="blacktext">8c. What operating system does your home computer run in? <span class="italic">Select all that apply</span></div>
<div class="row">
<pre class="prestyle">
    <span><input type="checkbox" name="OS" value="Linux" id="Linux" aria-labelledby="Linux-ariaLabel"> <label for="Linux" id="Linux-ariaLabel">Linux</label></span>         <span id="showLinuxSpecify"><label for="Linux_version" id="Linux_version-ariaLabel">Please specify:</label><input value="" id="Linux_version" name="OLinux_version" type="text" aria-labelledby="Linux_version-ariaLabel" style="width:150px"></span>   
    <span><input type="checkbox" name="OS" value="OSX" id="OSX" aria-labelledby="OSX-ariaLabel"> <label for="OSX" id="OSX-ariaLabel">Mac OSX</label></span>         <span id="showOSXspecify"><label for="OSX_version" id="OSX_version-ariaLabel">Please specify:</label><input value="" id="OSX_version" name="OSX_version" type="text" aria-labelledby="OSX_version-ariaLabel" style="width:150px"></span>
    <span><input type="checkbox" name="OS" value="Windows" id="Windows" aria-labelledby="Windows-ariaLabel"> <label for="Windows" id="Windows-ariaLabel">Microsoft Windows</label></span>           <span id="showWindowsSpecify"><label for="Windows_version" id="Windows_version-ariaLabel">Please specify:</label><input value="" id="Windows_version" name="Windows_version" type="text" aria-labelledby="Windows_version-ariaLabel" style="width:150px"></span>
    <span><input type="checkbox" name="OS" value="Other" id="OtherOS" aria-labelledby="OtherOS-ariaLabel"> <label for="OtherOS" id="OtherOS-ariaLabel">Other</label></span>         <span id="showOtherOSSpecify"><label for="OtherOS_version" id="OtherOS_version-ariaLabel">Please specify:</label><input value="" id="OtherOS_version" name="OtherOS_version" type="text" aria-labelledby="OtherOS_version-ariaLabel" style="width:150px"></span>
</pre>
</div>
</span>

</div>
</fieldset>

</form>
<!--Edit the text inside the <p> tags according to the remaining number of questions or pages -->

<p class="page">Page 3 of X</p>
<center>
<input value="Next Page" type="submit">
</center>

</body>
原文

I found an odd error when I was splitting up my code into a new page (and reorganizing the questions). Sorry if my code is sloppy, I've done alot of re-learning as I begin to incorporate CSS and jQuery into my knowledge base...last time I made a website was with tables back in high school.

Anyway, the problem I have is the hidden input text boxes (the specify ones) show up when a participant clicks on the checkbox. What happens when I originally tested the code in Firefox and IE was the box correctly un-hides itself to the right of the checkbox item.

However, now the input box is appearing below the checkbox! How can I fix this?

CSS code:

#inputArea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    background-color: #d6e5f4;
    padding: 10px;
}

#inputArea input[type="text"], #inputArea textarea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    border: solid 1px #85b1de;
    width: 300px;
    background-color: #EDF2F7;
} 

div.row label:hover {
    background:#FFFF66;
    cursor:pointer;
}


.prestyle {
  display: inline;
  font-size:14.4px;
  font-family: Arial, Helvetica, sans-serif;
}


.indent { margin-left: 50px; }

p.page {
    text-align:center;
    font-size:20px;
}

.italic {font-style:italic;}

.blacktext {
    font: 14pt sans-serif;
    letter-spacing 2pt;
    color: #000000
}


#inputArea input[type="text"]:focus, #inputArea textarea:focus
{
    background-image: none;
    background-color: #ffffff;
    border: solid 1px #33677F;
}

body
{
background-color: #d6e5f4;
}


</style>

Javascript/JQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            $('#Yes_Computer1').hide();

            $('#Yes_Computer').click(function () {
                $('#Yes_Computer1').toggle(400);
            });
        });
        $(document).ready(function () {
            $('#No_Computer').click(function () {
                $('#Yes_Computer1').hide();

            });
        });     
        $(document).ready(function () {
            $('#showLinuxSpecify').hide();

            $('#Linux').click(function () {
                $('#showLinuxSpecify').toggle(400);
            });
        });
        $(document).ready(function () {
            $('#showOSXspecify').hide();

            $('#OSX').click(function () {
                $('#showOSXspecify').toggle(400);
            });
        });
        $(document).ready(function () {
            $('#showWindowsSpecify').hide();

            $('#Windows').click(function () {
                $('#showWindowsSpecify').toggle(400);
            });
        });     
        $(document).ready(function () {
            $('#showOtherOSSpecify').hide();

            $('#OtherOS').click(function () {
                $('#showOtherOSSpecify').toggle(400);
            });
        });     
        $(document).ready(function () {
            $('#showhidetarget5').hide();

            $('#OtherBrowser').click(function () {
                $('#showhidetarget5').toggle(400);
            });
        });         
</script>

Body:

<body>
<form name="Background" method="post" action="http://localhost/background.php">

<fieldset>
<div id="inputArea">


<div class="blacktext">8. Do you have a computer at home?</div>
<div class="row">
<pre class="prestyle">
    <span><input type="radio" name="Home_Computer" value="Yes" id="Yes_Computer" onclick=""><label for="Yes_Computer" id="Yes_Computer-ariaLabel">Yes</label></span>
    <span><input type="radio" name="Home_Computer" value="No" id="No_Computer" onclick=""><label for="No_Computer" id="No_Computer-ariaLabel">No</label></span>
</pre>
</div>
<br />
<span id="Yes_Computer1">
<div class="blacktext">8a. What type of internet connection do you use at home?  <span class="italic">Please check all that apply</span>.</div>
<div class="row">
<pre class="prestyle">
    <span><input type="checkbox" name="modem" value="Cable" id="Cable" aria-labelledby="Cable-ariaLabel"> <label for="Cable" id="Cable-ariaLabel">Cable Service</label></span>  
    <span><input type="checkbox" name="modem" value="Dial-up" id="Dial-up" aria-labelledby="Dial-up-ariaLabel"> <label for="Dial-up" id="Dial-up-ariaLabel">Dial-up Service</label></span>      
    <span><input type="checkbox" name="modem" value="DSL" id="DSL" aria-labelledby="DSL-ariaLabel"> <label for="DSL" id="DSL-ariaLabel">DSL Service</label></span>      
    <span><input type="checkbox" name="modem" value="SatelliteDish" id="SatelliteDish" aria-labelledby="SatelliteDish-ariaLabel"> <label for="SatelliteDish" id="SatelliteDish-ariaLabel">Satellite Dish Service</label></span>     
    <span><input type="checkbox" name="modem" value="FiberOptic" id="FiberOptic" aria-labelledby="FiberOptic-ariaLabel"> <label for="FiberOptic" id="FiberOptic-ariaLabel">Fiber-Optic Service</label></span>       
    <span><input type="checkbox" name="modem" value="MobileBroadband" id="MobileBroadband" aria-labelledby="MobileBroadband-ariaLabel"> <label for="MobileBroadband" id="MobileBroadband-ariaLabel">Mobile Broadband Plan for a Computer or Cell Phone</label></span>       
</pre>
</div>
<br />
<div class="blacktext">8b. Browsers are software on a computer used to surf the Internet.  Last month, which Internet browser did you typically use at home?  <span class="italic">Please check all that apply</span>.</div>
<div class="row">
<pre class="prestyle">
    <span><input type="checkbox" name="modem" value="Firefox" id="Firefox" aria-labelledby="Firefox-ariaLabel"> <label for="Firefox" id="Firefox-ariaLabel">Firefox</label></span>  
    <span><input type="checkbox" name="modem" value="GoogleChrome" id="GoogleChrome" aria-labelledby="GoogleChrome-ariaLabel"> <label for="GoogleChrome" id="GoogleChrome-ariaLabel">Google Chrome</label></span>   
    <span><input type="checkbox" name="modem" value="InternetExplorer" id="InternetExplorer" aria-labelledby="InternetExplorer-ariaLabel"> <label for="InternetExplorer" id="InternetExplorer-ariaLabel">Internet Explorer</label></span>   
    <span><input type="checkbox" name="modem" value="Safari" id="Safari" aria-labelledby="Safari-ariaLabel"> <label for="Safari" id="Safari-ariaLabel">Safari</label></span>    
    <span><input type="checkbox" name="modem" value="OtherBrowser" id="OtherBrowser" aria-labelledby="OtherBrowser-ariaLabel"> <label for="OtherBrowser" id="OtherBrowser-ariaLabel">Other</label></span>       <span id="showhidetarget5"><label for="OtherBrowser_version" id="OtherBrowser_version-ariaLabel">Please specify:</label><input value="" id="OtherBrowser_version" name="OtherBrowser_version" type="text" aria-labelledby="OtherBrowser_version-ariaLabel" style="width:150px"></span></pre>
</div>
<br />
<div class="blacktext">8c. What operating system does your home computer run in? <span class="italic">Select all that apply</span></div>
<div class="row">
<pre class="prestyle">
    <span><input type="checkbox" name="OS" value="Linux" id="Linux" aria-labelledby="Linux-ariaLabel"> <label for="Linux" id="Linux-ariaLabel">Linux</label></span>         <span id="showLinuxSpecify"><label for="Linux_version" id="Linux_version-ariaLabel">Please specify:</label><input value="" id="Linux_version" name="OLinux_version" type="text" aria-labelledby="Linux_version-ariaLabel" style="width:150px"></span>   
    <span><input type="checkbox" name="OS" value="OSX" id="OSX" aria-labelledby="OSX-ariaLabel"> <label for="OSX" id="OSX-ariaLabel">Mac OSX</label></span>         <span id="showOSXspecify"><label for="OSX_version" id="OSX_version-ariaLabel">Please specify:</label><input value="" id="OSX_version" name="OSX_version" type="text" aria-labelledby="OSX_version-ariaLabel" style="width:150px"></span>
    <span><input type="checkbox" name="OS" value="Windows" id="Windows" aria-labelledby="Windows-ariaLabel"> <label for="Windows" id="Windows-ariaLabel">Microsoft Windows</label></span>           <span id="showWindowsSpecify"><label for="Windows_version" id="Windows_version-ariaLabel">Please specify:</label><input value="" id="Windows_version" name="Windows_version" type="text" aria-labelledby="Windows_version-ariaLabel" style="width:150px"></span>
    <span><input type="checkbox" name="OS" value="Other" id="OtherOS" aria-labelledby="OtherOS-ariaLabel"> <label for="OtherOS" id="OtherOS-ariaLabel">Other</label></span>         <span id="showOtherOSSpecify"><label for="OtherOS_version" id="OtherOS_version-ariaLabel">Please specify:</label><input value="" id="OtherOS_version" name="OtherOS_version" type="text" aria-labelledby="OtherOS_version-ariaLabel" style="width:150px"></span>
</pre>
</div>
</span>

</div>
</fieldset>

</form>
<!--Edit the text inside the <p> tags according to the remaining number of questions or pages -->

<p class="page">Page 3 of X</p>
<center>
<input value="Next Page" type="submit">
</center>

</body>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

另类 2024-09-17 20:36:27
#inputArea input[type="text"], #inputArea textarea
{
  font-family: Arial, Sans-Serif;
  font-size: 13px;
  margin-bottom: 5px;
  display: block;  <------This is your problem
  padding: 4px;
  border: solid 1px #85b1de;
  width: 300px;
  background-color: #EDF2F7;
}

如果你想让它坐在旁边，应该是 display: inline （我认为这是默认的）。如果您需要宽度，请使用display: inline-block。

#inputArea input[type="text"], #inputArea textarea
{
  font-family: Arial, Sans-Serif;
  font-size: 13px;
  margin-bottom: 5px;
  display: block;  <------This is your problem
  padding: 4px;
  border: solid 1px #85b1de;
  width: 300px;
  background-color: #EDF2F7;
}

Should be display: inline (which I think is default) if you want it to sit beside. If you need the width then use display: inline-block.

回复 原文
逆蝶 2024-09-17 20:36:27

我认为这些行将帮助您入门，至少对于有关浏览器的行而言。

关键是您需要浮动跨度，然后浮动隐藏跨度。不过，您需要清除除隐藏跨度之外的所有跨度。

DEMO

 #showhidetarget5 {
    float:left;
    clear:none;
  }
  span {
    float:left; 
    clear:both;
  }

另外，所有“aria-labelledby”属性是怎么回事？我认为这些都不是有效的 html 属性。

I think these lines will help you get started, at least for the line about browsers.

The key thing is that you need to float your spans and then float the hidden span. You'll need to clear all of your spans except for the hidden ones though.

DEMO

 #showhidetarget5 {
    float:left;
    clear:none;
  }
  span {
    float:left; 
    clear:both;
  }

Also, what's up with all of the 'aria-labelledby' attritbutes? I don't think those are even valid html attributes.

回复 原文
~没有更多了~

关于作者

﹏半生如梦愿梦如真

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

玍銹的英雄夢

文章 0 评论 0

我不会写诗

文章 0 评论 0

十六岁半

文章 0 评论 0

浸婚纱

文章 0 评论 0

qq_kJ6XkX

文章 0 评论 0

旧伤还要旧人安

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文