Невозможно отобразить список и тег h1 на одной строке - PullRequest
Новая
       0

Невозможно отобразить список и тег h1 на одной строке

2 голосов
/ 02 июля 2011


Я пытаюсь создать веб-страницу со списком меню и логотипом рядом. В приведенном ниже коде, когда я пытаюсь сделать их рядом, один из них перемещается вниз по странице. Я хочу, чтобы и список, и заголовок располагались рядом. Вот код, 

<!DOCTYPE html>
<html dir="ltr" lang="en-UK"> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Fahad | Just another web designer</title>
        <!--Styling Starts-->
    </script> 
       <style type="text/css"> 
            <link href='http://fonts.googleapis.com/css?family=Chewy&v1' rel='stylesheet'               type='text/css'>
            h1 { font-family: 'Chewy', arial, serif;
             }
             h1 {
                 font-size:45px; 
                 padding-top:70px;
                 padding-left:350px;
             }
            .menu 
            {
                padding:0;
                margin-left:0;  
                height:200px;
                width:300px;
            }
              .menu ul
             {
                padding-left:200px;
                padding-top:45px;
                font:Verdana, Geneva, sans-serif;
                list-style-type:none;
                text-decoration:none;
                color:#666;
              }
              .container
              {
                color:#666; 
              }
              a:link
              {
                 color:#666;
              }
              a:hover
              {
                 color:#333;
              }
              a:active
              {
                color:#666;
              }

     </style>

    </head>
    <body>
        <div class="container">
       <h1>Fahad</h1>  
            <div class="menu">

            <ul>
                <li><a>Home</a> </li>    
                <li><a>Blog</a></li>
                <li><a>About</a></li>
                <li><a>Contact</a></li> 

            </ul>

            </div><!--logo div ends-->

        </div><!--Container Div ends-->
    </body>
</html>

Пожалуйста, помогите мне. Спасибо.

Ответы [ 4 ]

6 голосов
/ 03 июля 2011

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

Демонстрационная версия: http://jsfiddle.net/DcS4u/

2 голосов
/ 02 июля 2011

H1 и LI по умолчанию являются блочными элементами.Если вы хотите, чтобы они находились в одной строке с другим элементом, вы должны изменить его на встроенный.

H1, LI
{
  display: inline;
}

Однако это может принести вам больше вреда, чем пользы.
Вам следует рассмотреть плавающие блочные элементы в одной строке.

Обновлено:

Аналогично, вы можете получить 3 контейнера для плавания: 

<div class="floater-parent clearfix">
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>

.floater-parent DIV
{
   width: 150px;
   float: left;
}
1 голос
/ 02 июля 2011

Вам нужно сначала всплыть и h1, и меню слева 

h1, .menu {float:left;}

, а затем, чтобы убедиться, что любой контент, следующий за меню, не отображается в той же строке, вам необходимо очистить следующий ближайший элемент. 

example: #pageContent {clear:both;} // technically this could be clear:left.

<body>
  <h1>My Page</h1>
  <div class="menu">link1, link2</div>
  <div id="pageContent">
    Contents of my page
  </div>
</body>
1 голос
/ 02 июля 2011

Попробуйте добавить float: left к h1.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...