Радиокнопка с длинной меткой в ​​выпуске IE7 - PullRequest
Новая
       25

Радиокнопка с длинной меткой в ​​выпуске IE7

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

У меня есть переключатель с длинными метками, который переносится на следующую строку, он отображается правильно в Firefox и IE8, но не в IE7 и IE6.

В основном то, что я хочу, показано ниже (где o - переключатель):

  • Я / мы авторизируем Снятие средств с моей учетной записи Investec на и ПРЯМЫЕ ДЕБИТЫ с этой назначенной учетной записи
  • Я / мы авторизируем ТОЛЬКО Снятие со своего аккаунта на указанный аккаунт
  • Я / мы авторизируем ТОЛЬКО ПРЯМЫЕ СРЕДСТВА с этого аккаунта на мой аккаунт

Мой css:

label {
  float:none;
  padding-left: 15px;
  text-align:left;
  width:420px;
  display:block;
  margin-left; 10px;
}

В IE7 и IE6 следующая строка находится под переключателем, а не под первой буквой первого слова метки

Ответы [ 3 ]

1 голос
/ 02 декабря 2011

Просто увеличьте ширину этикетки. Может быть, вы можете использовать встроенный тег, например, 

<label style="width:420">

Или вы можете добавить это как свойство в CSS для метки.

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

Это работает для меня в IE8, IE7 и FF;У меня нет IE6 для тестирования, но подход должен быть здравым.Я предполагаю, что у вас есть свобода редактирования HTML.

По сути, добавьте левый отступ к метке и поместите: относительный, чтобы потомки наследовали положение от него, а затем используйте положение: абсолютное на переключателе, чтобы расположить егов этом отступе.

HTML: 

   <label><input type="radio" />I/we authorise WITHDRAWALS from my Investec account to and DIRECT DEBITS from this designated account</label>
   <label><input type="radio" />I/we authorise WITHDRAWALS ONLY from my account to this designated account</label>
   <label><input type="radio" />I/we authorise DIRECT DEBITS ONLY from this designated account to my account</label>

CSS: 

label { position:relative;top:0; padding-left:25px; text-align:left; width:420px; display:block;  }
label input { position:absolute; top:0;left:0; }

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

0 голосов
/ 01 июля 2010 
<!doctype html>
<html>
    <head>
        <title></title>
        <style>
html {
    font: 12px sans-serif;
}
form 
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 400px;
}
label {
    cursor: pointer;
}
input {
    float: left;
}
        </style>
    </head>
    <body>
        <form action="">
            <ul>
                <li>
                    <label><input type="radio" name="authorise"> I/we authorise WITHDRAWALS from my Investec account to and DIRECT DEBITS from this designated account</label>
                </li>
                <li>
                    <label><input type="radio" name="authorise"> I/we authorise WITHDRAWALS ONLY from my account to this designated account</label>
                </li>
                <li>
                    <label><input type="radio" name="authorise"> I/we authorise DIRECT DEBITS ONLY from this designated account to my account</label>
                </li>
            </ul>
        </form>
    </body>
</html>
...