Блог

Главная - Вопросы по программированию - Проблема с позиционированием Google Chrome

Проблема с позиционированием Google Chrome

#css

#css

Вопрос:

У меня проблема с позиционированием некоторого текста в Google Chrome, я пытаюсь расположить «Проложить маршрут» и «Связаться» рядом. Это отлично работает в IE, Firefox и Opera, но не в Chrome. Я знаю, что мне, вероятно, следует использовать floats, но есть ли у кого-нибудь идеи, почему это работает неправильно?

(CSS)

     #main_container2{

    background-color: white;
    position:relative;
    left: 0%;
    top:0%;
    width:950px;
    height:985px;
    font-family:arial;
    font-size:36pt;



    }

(HTML)

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href='green_machine.css'>
<title> test</title>

</head>


<body bgcolor="black">

<div id="main_container2">

<p></p>
<font style="position:absolute;top:5%;left:6%;">Get Directions</font><p></p>
<font style="position:relative;top:5%;left:56%;">Contact</font><br>

</div>


</body>
</html>

Ответ №1:

Вы используете:

 <font style="position:absolute;top:5%;left:6%;">Get Directions</font><p></p>
<font style="position:relative;top:5%;left:56%;">Contact</font><br>

Первый элемент position: absolute и второй элемент position: relative

Просто установите для обоих значение absolute или relative

PS

Я бы превратил это в ul и li ‘s

И либо использовать float , либо отображать inline

Ответ №2:

Во-первых, вам не нужны аргументы left и top в главном контейнере div, по умолчанию позиционируемый элемент привязан к верхнему левому краю.

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

Комментарии:

1. Большое спасибо. Мне нужно вернуться и изучить позиционирование css 🙁