Выравнивание текста с помощью границ

Question

Существует, вероятно, широкий спектр плохой практики, которую я использую, поскольку я начинаю, когда дело доходит до HTML и CSS, поэтому, пожалуйста, помните об этом, когда голосующий этот пост в самый темный глубины Интернета. Моя проблема в том, что я хочу сделать строку текста, которая прерывает горизонтальную границу, но затем я хочу, чтобы текст после него был выровнен с исходным текстом. Вот код, который у меня есть. HTML:

<h2 style = "float:left; width:500px"><span>This is a test</span></h2> 
<div id = "test"> 
    <p>Other stuff</p> 
</div> 

CSS:

h2 { 
text-align: center; 
border-bottom: 1px solid #000; 
line-height: 0.1em; 
margin: 10px 0 20px; 
} 
h2 span { 
background:#fff; 
} 
#test{ 
border-right: 1px solid black; 
width: 50px; 
position: relative; 
float: left; 
} 

Я хочу, чтобы выглядеть следующим образом:

-----This is a test ------------------------------- 
             Other Stuff| 

Эффект Я пытаюсь получить в основном углу. Вертикальная линия после «Другого материала» должна ссылаться на строку, исходящую из «Это тест». У меня возникли проблемы с выравниванием текста. Теперь моя вертикальная линия выходит за горизонтальную линию. Мои извинения снова за всю плохую практику, которую я, вероятно, показываю, но я бы очень признателен за любую помощь в этом. CSS - ужасное время для меня. Заранее спасибо.

Answer 1

Wrap как внутри общего position:relative; родителя
и установить #test быть позицию: абсолютная сверху и справа:

.container{ /* added */ 
 
    width:500px; 
 
    position:relative; /* in order to contain absolute children */ 
 
} 
 
h2 { 
 
/*float:left; no need to */ 
 
/*width:500px; now container has it */ 
 
text-align: center; 
 
border-bottom: 1px solid #000; 
 
line-height: 0.1em; 
 
margin: 10px 0 20px; 
 
} 
 
h2 span { 
 
background:#fff; 
 
} 
 

 
#test{ 
 
border-right: 1px solid black; 
 
width: 50px; 
 
/*position: relative; set to absolute! */ 
 
    position:absolute; 
 
    top:2px; /* added */ 
 
    right:0; /* added */ 
 
/*float: left; no need to */ 
 
}

<div class="container"> 
 
    <h2><span>This is a test</span></h2> 
 
    <div id = "test"> 
 
    <p>Other stuff</p> 
 
    </div> 
 
</div>

Answer 2

Вы должны заботиться, чтобы иметь в виду рамки вашего сайта, если вы позиционируете эти элементы, но если вы увеличиваете div, чтобы соответствовать тексту без обертывания, а затем вы можете использовать поля, чтобы позиционировать элемент, который вам нужен, поскольку он уже плавает. Использовать это css:

h2 { 
text-align: center; 
border-bottom: 1px solid #000; 
line-height: 0.1em; 
margin: 10px 0 20px; 
} 
h2 span { 
background:#fff; 
} 
#test{ 
border-right: 1px solid black; 
width: 75px; 
position: relative; 
float: left; 
margin-top: 12px; 
margin-left: -75px; 
}