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

1

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

<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>
  • 3
    Показать полный код с помощью ссылки jsFiddle, повторяющей проблему, с которой вы столкнулись.
  • 0
    Сэр, эта часть кода работает нормально в разрешении экрана 1366 x 768. Но когда я изменяю разрешение экрана на 1024 x 768, все заголовки перекрываются.
Показать ещё 2 комментария
Теги:

2 ответа

0
Лучший ответ

Поместите все ваши элементы в дочерний элемент 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>

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

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

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

Поделиться
  • 0
    Сэр не получил желаемый результат
  • 0
    отредактировал мой код, чтобы попытаться исправить
0

создайте основное подразделение и поместите свой код в основное подразделение. set whit with и height of main division до 100% style = "width:100%; height:"as you want"; процент с автоматической настройкой для всех разрешений.

Поделиться
  • 0
    Извините, но я не поняла. Не могли бы вы объяснить

Ещё вопросы

Сообщество Overcoder
Наверх
Меню