Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 11, средняя оценка - 4.91
doozy
1 / 1 / 0
Регистрация: 20.11.2013
Сообщений: 32
#1

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

01.04.2014, 03:51. Просмотров 1788. Ответов 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> на одной строке - HTML, CSS
&lt;div class=rounded&gt;&lt;span class=rText&gt;1234567890123&lt;/span&gt;&lt;/div&gt; &lt;div class=rounded&gt;&lt;span class=rText&gt;1234567890123&lt;/span&gt;&lt;/div&gt; ...

Два div`a в одной строке - HTML, CSS
Добрый день, объясните пожалуйста, в чем проблема? Как я понимаю, psot должен стать рядом с post в одной строке. .post {width: 80%;} ...

Два div на одной строке - HTML, CSS
Добрый вечер! Как сделать чтобы два div были в одной строке при этом мапились под окно браузера, и картинки в них тоже Использую...

3 блока div на одной строке - HTML, CSS
Необходимо разместить 3 блока div на одной строке. Блоки фиксированной ширины(300px). Блоки размещаются внутри главного контейнера(1000px),...

Расположение двух блоков div на одной строке - HTML, CSS
Здравствуйте! Понадобилось сделать так, чтобы два блока div находились на одном уровне. Получилось сделать это с помощью float, вот...

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

10
Vladislav WebDev
324 / 214 / 76
Регистрация: 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
2390 / 1063 / 98
Регистрация: 23.06.2011
Сообщений: 3,323
01.04.2014, 06:31 #3
Цитата Сообщение от Suby Посмотреть сообщение
делайте все спанами:
тогда линия будет ниже строки, а на картинке линия вровень с левой частью
0
Vladislav WebDev
324 / 214 / 76
Регистрация: 04.11.2012
Сообщений: 638
01.04.2014, 06:31 #4
И для правильного отображения\выравнивания таких вещей лучше использовать таблицы.
0
newJS
2390 / 1063 / 98
Регистрация: 23.06.2011
Сообщений: 3,323
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 / 76
Регистрация: 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 / 0
Регистрация: 20.11.2013
Сообщений: 32
01.04.2014, 16:54  [ТС] #8
Спасибо всем большое. Но здесь немаловажная часть, чтобы независимо от длины текста ответа, подчеркивание было до конца строки. Т.е. чтобы все линии подчеркивания заканчивались в одном месте, а их длина зависела только от ширины вопроса, но не ответа.
0
Vladislav WebDev
324 / 214 / 76
Регистрация: 04.11.2012
Сообщений: 638
04.04.2014, 17:17 #9
doozy, вы тестовое задание выполняете с обьявления на авито?) Как успехи?
0
doozy
1 / 1 / 0
Регистрация: 20.11.2013
Сообщений: 32
04.04.2014, 19:30  [ТС] #10
Ага) с hh только. С этим справился, теперь застрял на ползунке
0
Vladislav WebDev
324 / 214 / 76
Регистрация: 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, CSS
Здравствуйте, уважаемые форумчане! Делаю первые шаги в HTML, поэтому вопрос может наивный, не обессудьте. Выполнял упражнение...

Разметка span внутри div - HTML, CSS
Блок div занимает всю строку, в него помещаю блок span и провожу выравнивание справа, но несмотря на параметры css класс name1 печатается...

Чем отличается div от span! - HTML, CSS
Тем что span можно использоваться внутри других тегов? спасибо! Добавлено через 15 минут + он не блочный? всё ?

Разница между div и span - HTML, CSS
Здраствуйте. Меня интересует такой вопрос. В чем заключается разница между &lt;div&gt; и &lt;span&gt;? Заранее благодарю.


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

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

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