Я пытаюсь вспомнить lo go left и группу ссылок прямо в заголовке div - PullRequest
Новая
       42

Я пытаюсь вспомнить lo go left и группу ссылок прямо в заголовке div

0 голосов
/ 03 мая 2020

Я пытаюсь создать заголовок, где слева находится go, а группа ссылок выровнена горизонтально рядом друг с другом справа. это мой код ниже с изображением результата. Мне действительно нужна помощь, пожалуйста

вот и результат 

#header{
    height: 100px;
    width:100%;
    overflow:hidden;
    background-color:#1b2142;
    padding:0px;
    top:0px;
    left:0px;
     
}
.links{
    width:70%;
    float:right;   
    padding-top:10px;
    overflow: hidden;
}
.link ul li{
    display:inline-block;
    text-align:center;
    font-size:20px;
    list-style: none;
    color:white;
    
<body>
        <div id="header">
            <div class="logo"><img src="untitled.jpg" height="100px" width="100px" >
                <div class="links">
                    <ul>
                        <a class="link" href="#">Home</li></a>
			            <li><a class="link" href="#">About Us</li></a>
			            <li><a class="link" href="#">Contact Us</li></a>
			            <li><a class="link" href="#">FAQ</li></a>
			            <li><a class="link" href="#">View Users</li></a>
			            <li><a class="link" href="#">Our Staffs</li></a>
			            <li><a class="link" href="#">See testimonies</li></a>
			            <li><a class="link" href="#">Address</li></a>
                        <li><a class="link" href="#">Alumis</li></a>
                    </ul>
                </div>
            
            </div>

Ответы [ 2 ]

0 голосов
/ 03 мая 2020

Отредактируйте эту часть кода, как показано ниже. Это должно работать. 

.links{
    float:right;
    padding-top:10px;
    overflow: hidden;
}
.link ul li{
    display:inline-block;
    text-align:center;
    font-size:20px;
    list-style: none;
    color:white;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}
0 голосов
/ 03 мая 2020

Класс ссылок должен иметь правильное выравнивание текста, чтобы решить эту проблему.

Добавьте эту строку в стиль .links: 

text-align: right;

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

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

Похожие темы

...