Стиль Radiobutton не отображается, как ожидалось

У меня есть очень простая форма, но я использовал сторонний css, который, кажется, дает мне проблему. Я довольно долго смотрел теперь на него в этом CSS, но ничего не могу найти какую причину этой проблемы,Стиль Radiobutton не отображается, как ожидалось

Mevr.<input type="radio" name="gender" value="Mevr."> 
    Dhr.<input type="radio" name="gender" value="Dhr."> 
    Fam.<input type="radio" name="gender" value="Fam.">

это то, что я ожидал

С CSS третьей стороны активной я получаю это:

Мой вопрос: Что рядный стиль, который я могу использовать, чтобы получить мои радиокнопки рядом друг друга, как на первом снимке?

Примечание: CSS-код, что причина проблема является here:

источник

2016-06-07 Richard

нам нужно проверить код, мы не можем помочь вам решить проблему без какой-либо коды – Radian

дисплея: рядный; может быть, но, как сказал Радиан, вам нужно поделиться этой частью кода или дать нам ссылку на ваш сайт. – Frutis

Вы используете простой html или asp.net? – Ansari

Как вы не дали coding.You может попробовать это:

<style> 
 

 
.some-class { 
 
    float: left; 
 
    clear: none; 
 
} 
 

 
label { 
 
    float: left; 
 
    clear: none; 
 
    display: block; 
 
    padding: 2px 1em 0 0; 
 
} 
 

 
input[type=radio], 
 
input.radio { 
 
    float: left; 
 
    clear: none; 
 
    margin: 2px 0 0 2px; 
 
} 
 
</style>

<div class="some-class"> 
 
    <input type="radio" class="radio" name="x" value="y" id="y" /> 
 
    <label for="y">Thing 1</label> 
 
    <input type="radio" class="radio" name="x" value="z" id="z" /> 
 
    <label for="z">Thing 2</label> 
 
    </div>

источник

2016-06-07 09:05:43

благодарю вас за быстрый ответ. Я пробовал это, но все же радиокнопки появляются в строке, а не рядом друг с другом (пример) https://dl.dropboxusercontent.com/u/697986/radio3.JPG – Richard

Тогда это означает, что ваш сторонний css переопределяет это css.You может дать другое имя класса –

Поскольку вы Ждете» t включите в ваш пост CSS трудно сказать, в чем проблема.

Простая догадка заключается в том, что input s имеет свойство displayblock. Это может привести к разрыву линии и, возможно, другим UI изменяется (как видно на скриншотах).

Использование display: inline-block; поможет решить эту проблему.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th { 
 
margin:0; 
 
padding:0; 
 
} 
 

 
input[type="radio"] { 
 
    display: inline-block; 
 
}

Mevr.<input type="radio" name="gender" value="Mevr."> 
 
Dhr.<input type="radio" name="gender" value="Dhr."> 
 
Fam.<input type="radio" name="gender" value="Fam.">

EDIT В соответствии с обновленной вопрос, проблемы, как представляется, с width из вас input тегов.

Вы должны попробовать установить свой width свойство auto

input { 
 
    border: 1px solid #b0b0b0; 
 
    padding: 3px 5px 4px; 
 
    color: #979797; 
 
    width: auto; 
 
}

Mevr.<input type="radio" name="gender" value="Mevr."> 
 
Dhr.<input type="radio" name="gender" value="Dhr."> 
 
Fam.<input type="radio" name="gender" value="Fam.">

Просто замените его на существующий в вашем CSS.

На боковой ноте. Я вижу, что ваш CSS имеет множество объявлений по всему содержанию. Подумайте об этом и удалите ненужные декларации.

источник

2016-06-07 09:34:33

Спасибо, я пробовал этот, но он не решил его. Я добавил CSS в сообщение – Richard

Я использовал фиктивный HTML.Попробуйте это:

<div style="float: left"> 
 
    <input id="RadioButtonList1_0" name="RadioButtonList1" value="One" type="radio"><label for="RadioButtonList1_0">One</label> 
 

 
    <input id="RadioButtonList1_1" name="RadioButtonList1" value="Two" type="radio"><label for="RadioButtonList1_1">Two</label> 
 

 
    <input id="RadioButtonList1_2" name="RadioButtonList1" value="Three" type="radio"><label for="RadioButtonList1_2">Three</label> 
 

 
</div>

источник

2016-06-07 10:15:14 Ansari

Стиль Radiobutton не отображается, как ожидалось

ответ

Смежные вопросы