Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 11, средняя оценка - 4.91
doozy
1 / 1 / 5
Регистрация: 20.11.2013
Сообщений: 32
#1

Span и div в одной строке - HTML, CSS

01.04.2014, 03:51. Просмотров 2092. Ответов 10
Метки нет (Все метки)

Добрый вечер. Как можно реализовать верстку, показанную на первой картинке? Пробовал так:
HTML5
1
2
3
4
<span class="aks">Полное ФИО</span>
<div class='answer'></div>
<span class="aks">Год рождения</span>
<div class='answer'></div>
CSS
1
2
3
4
5
6
.answer{
    border-bottom: 2px solid;
}
.aks{
    margin-right: 10px;
}
Почему спан тоже подчеркивается? Его место занимает див?
0
Миниатюры
Span и div в одной строке   Span и div в одной строке  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
01.04.2014, 03:51
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Span и div в одной строке (HTML, CSS):

<div> на одной строке
&lt;div class=rounded&gt;&lt;span class=rText&gt;1234567890123&lt;/span&gt;&lt;/div&gt; &lt;div...

Два div на одной строке
Добрый вечер! Как сделать чтобы два div были в одной строке при этом мапились...

3 блока div на одной строке
Необходимо разместить 3 блока div на одной строке. Блоки фиксированной...

Два div`a в одной строке
Добрый день, объясните пожалуйста, в чем проблема? Как я понимаю, psot должен...

Расположение двух блоков div на одной строке
Здравствуйте! Понадобилось сделать так, чтобы два блока div находились на...

div поверх span
что надо прописать, что бы одно окно было поверх другого, а точнее div поверх...

10
Vladislav WebDev
324 / 214 / 97
Регистрация: 04.11.2012
Сообщений: 638
01.04.2014, 06:23 #2
doozy, делайте все спанами:
HTML5
1
2
3
4
<span class="aks">Полное ФИО</span>
<span class='answer'>sdfsdf</span><br>
<span class="aks">Год рождения</span>
<span class='answer'>sdfsdf</span><br>
0
newJS
2395 / 1068 / 307
Регистрация: 23.06.2011
Сообщений: 3,330
01.04.2014, 06:31 #3
Цитата Сообщение от Suby Посмотреть сообщение
делайте все спанами:
тогда линия будет ниже строки, а на картинке линия вровень с левой частью
0
Vladislav WebDev
324 / 214 / 97
Регистрация: 04.11.2012
Сообщений: 638
01.04.2014, 06:31 #4
И для правильного отображения\выравнивания таких вещей лучше использовать таблицы.
0
newJS
2395 / 1068 / 307
Регистрация: 23.06.2011
Сообщений: 3,330
01.04.2014, 06:59 #5
Цитата Сообщение от Suby Посмотреть сообщение
И для правильного отображения\выравнивания таких вещей лучше использовать таблицы.
Абалдеть....
HTML5
1
2
3
4
5
6
<div class="q1">
<span class="q2">Полное ФИО</span>
<span class="q3">Фамилия Имя Отчество</span></div>
<div class="q1">
<span class="q2">Год рождения</span>
<span class="q3">1900</span></div>
CSS
1
2
3
.q3 {border-bottom:2px solid black; padding:0 33px 2px 9px; display:inline-block; margin:0 0 2px 9px;}
.q2 {vertical-align:bottom;}
.q1 {margin:5px 0;}
1
Vladislav WebDev
324 / 214 / 97
Регистрация: 04.11.2012
Сообщений: 638
01.04.2014, 07:33 #6
newJS, что обальдеть то хоть?
В коде что вы привели, всё будет сбито в кучу - и вопросы и ответы. А если таблицами сделать так, чтоб вопросы были бы в первой колонке таблицы и прижаты к например правому краю, а ответы были во второй колонке и прижаты к левому краю, ну и соответсвующе стиллизованы, то смотрелось бы куда лучше.
Или таблицы юзать "западло"?
Код для примера набирать не буду, ибо с мобилы пишу.
0
MathMath
29 / 29 / 9
Регистрация: 03.03.2014
Сообщений: 58
01.04.2014, 15:54 #7
Вариант первый: (посмотреть)
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
<div class="field">
    <strong>Полное ФИО</strong>
    <span>Mark Otto</span>
</div>
<div class="field">
    <strong>Год рождения</strong>
    <span>xxxx</span>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
.field { margin: 5px 0; }
.field span {
    display:inline-block;
    margin: 0 0 0 10px;
    padding: 0 50px 4px 10px;
    border-bottom: 2px solid black;
}
.field strong {
    vertical-align: bottom;
    font-size: 13px;
}


Вариант второй: (посмотреть)
Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
<ul class="list">
    <li>
        <strong>Полное ФИО</strong>
        <span>Mark Otto</span>
    </li>
    <li>
        <strong>Полное полное</strong>
        <span>Mark Otto</span>
    </li>
</ul>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.list {
    list-style: none;
}
.list li {
    margin: 10px 0;
}
.list span {
    display:inline-block;
    margin: 0 0 0 10px;
    padding: 0 50px 2px 10px;
    border-bottom: 2px solid black;
}
.list strong {
    vertical-align: bottom;
    font-size: 13px;
}



P.S:
class='answer'
"Always use double quotes, never single quotes, on attributes." @mdo (лучше так)
Перевод: "Всегда используйте двойные кавычки, и никогда одинарные, в атрибутах."
1
doozy
1 / 1 / 5
Регистрация: 20.11.2013
Сообщений: 32
01.04.2014, 16:54  [ТС] #8
Спасибо всем большое. Но здесь немаловажная часть, чтобы независимо от длины текста ответа, подчеркивание было до конца строки. Т.е. чтобы все линии подчеркивания заканчивались в одном месте, а их длина зависела только от ширины вопроса, но не ответа.
0
Vladislav WebDev
324 / 214 / 97
Регистрация: 04.11.2012
Сообщений: 638
04.04.2014, 17:17 #9
doozy, вы тестовое задание выполняете с обьявления на авито?) Как успехи?
0
doozy
1 / 1 / 5
Регистрация: 20.11.2013
Сообщений: 32
04.04.2014, 19:30  [ТС] #10
Ага) с hh только. С этим справился, теперь застрял на ползунке
0
Vladislav WebDev
324 / 214 / 97
Регистрация: 04.11.2012
Сообщений: 638
04.04.2014, 20:07 #11
Цитата Сообщение от doozy Посмотреть сообщение
застрял на ползунке
А что с ним не так? Вырежте его полностью с прозрачным фоном да и сохраните в .png-8 (для него будет достаточно), весить будет копейки и вам мороки ноль. Стрелку отдельно от него и позиционируете её как вам надо. Макет то вообще простецкий, чистая формальность.
0
04.04.2014, 20:07
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
04.04.2014, 20:07
Привет! Вот еще темы с решениями:

почему div, а не span
Здравствуйте, уважаемые форумчане! Делаю первые шаги в HTML, поэтому вопрос...

Разница между div и span
Здраствуйте. Меня интересует такой вопрос. В чем заключается разница между...

Чем отличается div от span!
Тем что span можно использоваться внутри других тегов? спасибо! Добавлено...

Разметка span внутри div
Блок div занимает всю строку, в него помещаю блок span и провожу выравнивание...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru