Почему скрытые поля ввода текста отображаются ниже, а не справа? - PullRequest
Новая
       5

Почему скрытые поля ввода текста отображаются ниже, а не справа?

0 голосов
/ 24 июля 2010

Я обнаружил странную ошибку, когда разбивал свой код на новую страницу (и реорганизовывал вопросы).Извините, если мой код неаккуратен, я много переучился, когда начал включать 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>

Тело: 

<code><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>
8а.Какой тип подключения к интернету вы используете дома?Пожалуйста, отметьте все подходящие варианты .
8б.Браузеры - это программное обеспечение на компьютере, используемое для серфинга в Интернете.В прошлом месяце, какой интернет-браузер вы обычно использовали дома?Пожалуйста, отметьте все подходящие варианты .
8с.В какой операционной системе работает ваш домашний компьютер?Выберите все подходящие варианты
Страница 3 из X
Следующая Страница

Ответы [ 2 ]

0 голосов
/ 24 июля 2010 
#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 (что я думаю по умолчанию), если вы хотите, чтобы он сидел рядом. Если вам нужен width, используйте display: inline-block.

0 голосов
/ 24 июля 2010

Я думаю, что эти строки помогут вам начать, по крайней мере, для строки о браузерах.

Ключевым моментом является то, что вам нужно всплывать ваши пролеты, а затем плавать скрытый промежуток. Вам нужно будет очистить все ваши промежутки, кроме скрытых, хотя.

DEMO 

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

Кроме того, что случилось со всеми «ариа-помеченными» аттрибутами? Я не думаю, что это даже допустимые атрибуты HTML.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...