Как установить все в 1 строке

Я сделал приборную панель, где у меня есть логотип в левой части названия проекта посередине & ссылки справа. Я использовал использованное абсолютное значение, чтобы получить все из них на одной строке & сделал он на разрешении экрана 1366 x 768. Но когда я проверил его на разрешение экрана 1024 x 768, он перекрылся. Пожалуйста помоги.Как установить все в 1 строке

<style> 
#heading{ text-align:right;font-size: 20px;float:right;margin:50px 20px;} 
#img{ margin:10px 10px; } 
</style> 
<body> 
<a href="homepage.php"><img id="img" src="LOGO.jpg" width="150px" height="100px"></a> 
<h1 align="center" style="position:absolute;top:30px; left:500px;">MEETING ROOM DETAILS</h1> 
<div id="heading"><a href="homepage.php" style="text-decoration:none;">Home</a>&nbsp;&nbsp;&nbsp;<?php echo ucwords($_SESSION['usr_name']); ?></font>&nbsp;&nbsp;&nbsp;<a href="changepswd.php" style="text-decoration:none;">Change Password</a>&nbsp;&nbsp;&nbsp;<a href="logout.php" style="text-decoration:none;">Logout</a>&nbsp;&nbsp;&nbsp;<a href="UserManual.pdf" target="_blank" style="text-decoration:none;">Help</a></div>

источник

2015-05-25 AK_56

Показать полный код с jsFiddle ссылкой тиражированием вопроса, который вы столкнулись. – Nitesh

Сэр эта часть кода работает нормально в разрешении экрана 1366 x 768. Но когда я меняю разрешение экрана на 1024 x 768, все заголовки перекрываются. –

Можете ли вы создать jsFiddle, как указано выше? Код, о котором вы упомянули выше, выглядит не более чем барахлом, если не представлен осмысленно. Если вы ищете четкие ответы, сначала уточните свои вопросы. – Nitesh

Поместите все свои элементы в дочерний элемент header-section и в родительский элемент header. Затем вы можете использовать display: inline-block, чтобы отобразить их все в одной строке.

EDIT: Давайте начнем с правильной структуры. Вам нужен заголовок, который разбивается на 3 части, все отображаются в одной строке. Это может быть достигнуто с помощью следующих действий:

#header 
 
{ 
 
    width:100%; 
 
    min-width: 1000px; 
 
    height: 100px; 
 
    font-size: 0px; 
 
} 
 

 
.small-section 
 
{ 
 
    min-width: 250px; 
 
    width: 25%; 
 
    height: 100px; 
 
    display: inline-block; 
 
    font-size: 14px; 
 
    vertical-align: top; 
 
    text-align: center; 
 
} 
 

 
.large-section 
 
{ 
 
    min-width: 500px; 
 
    width: 50%; 
 
    height: 100px; 
 
    display: inline-block; 
 
    font-size: 14px; 
 
    vertical-align: top; 
 
    text-align: center; 
 
}

<div id="header"> 
 
    <div class="small-section" style="background: rgb(255,0,0);">LOGO</div> 
 
    <div class="large-section" style="background: rgb(0,255,0);">TITLE</div> 
 
    <div class="small-section" style="background: rgb(0,0,255);">LINKS</div> 
 
</div>

Это создаст заголовок, который будет охватывать всю ширину страницы, если размер окна не менее 1000px в этом случае он остается в ширину 1000px и полоса прокрутки появится внизу.

Он имеет две небольшие секции шириной не менее 250 пикселей и всегда 25% от полного заголовка.

Он также имеет один большой раздел в середине, которая, по крайней мере 500px широких и всегда 50% от полного заголовка

источник

2015-05-25 10:23:57 jakecfc1992

сэр не получил желаемого результата. –

отредактировал мой код, чтобы исправить ошибку – jakecfc1992

создайте основное подразделение и введите свой код в основное подразделение. установить белый с и высота основного подразделения до 100% style = "width:100%; height:"as you want";. процент с автоматической настройкой для всех разрешений.

источник

2015-05-25 10:14:05 hardwork

Извините, но я didn 'Т понять. Не могли бы вы объяснить, что –

Как установить все в 1 строке

ответ

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