Извините, если все уже видели это снова и снова, я уверен, что делал это раньше, но не могу вспомнить или найти как!
У меня есть родительский тег div, содержащий серию тегов span, чтобы расположить ряд элементов в линию друг с другом - чтобы уточнить, «in line» является критическим, и это всего лишь одна строка, несколько последовательных строк являются требованием. Использование позиции: элементы относительного или блочного уровня вынуждают его перейти на новую строку, которая бесполезна. Например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Positioning testing</title>
</head>
<body>
<div style="position: relative; padding-top: 2px; padding-bottom: 2px;
background-color: Fuchsia;">
Hello world
<span style="position:relative; left: 80px;">
<input type="text" id="Test"/>
</span>
<span style="position: absolute; top: 2px; left: 350px; width:250px;
background-color:Lime;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at
fermentum risus. Nulla facilisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque mattis venenatis enim vitae
molestie. Integer in consequat metus. </span>
</div>
</body>
</html>
Я обещаю, что эти цвета только для тестирования, чтобы показать вещи (и так же обещаю встроенный стиль): -)
К сожалению, коробка из фуксии не будет соответствовать размеру лайма. Безобразно с одной строкой, серьезная проблема, когда вам нужно два из них в последовательности.
Я попытался установить переполнение для родительского элемента div, который просто скрывает все, кроме первой строки диапазона. Я пытался установить элементы для очистки во всех местах, но ни один из них не имел видимого эффекта.
Может кто-нибудь сказать мне, что мне не хватает, пожалуйста? Спасибо.