HTML выравнивание CSS - PullRequest
Новая
       8

HTML выравнивание CSS

0 голосов
/ 18 января 2010

Я пытаюсь совместить изображение и текст вместе. Если вы ссылаетесь на код ниже, там будет и изображение, и текст (имя и возраст), я хочу, чтобы они оба были рядом друг с другом. Я попробовал поплавок: ушел, но все равно не повезло.

Спасибо 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
        <title></title>
    <style>
        img {
            height: 10px;
            width: 20px;

        }
        ul li{


            display:block;
        }
        ul {
            margin: 0;
            float: left;
        }
        #container {
            margin: 10px

        }
    </style>

    </head>
    <body>
    <div id="container">
    <p>
    <img src="cat.jpg"> <ul><li>Source</li><li>Item Link Title</li> </ul> </p>
    </div>
    </body>
</html>

Ответы [ 3 ]

2 голосов
/ 18 января 2010

Технически ваш HTML неверен. Список - это элемент уровня блока, и вы не можете (или не должны) вставлять его тогда в абзацы, поскольку они должны принимать только встроенные элементы.

В вашей разметке нигде не упоминается имя и возраст, поэтому я не уверен, о чем вы там говорите.

Редактировать: , чтобы поместить изображение слева и располагать две метки справа друг над другом, используйте эту разметку: 

<div id="container">
<img src="cat.jpg">
<ul>
  <li>Source</li>
  <li>Item Link Title</li>
</ul>
</div>

и этот CSS: 

html, body, div, ul, li, img { padding: 0; margin: 0; border: 0 none; }
#container { background: yellow; overflow: hidden; float: left; }
#container img { float: left; }
#container ul { list-style-type: none; float: left; background: green; }

float: left на контейнере не является обязательным. Это просто означает, что он не такой широкий, как его контейнер. Первая строка - это грубый сброс CSS. Я бы предложил всегда использовать настоящий CSS и DOCTYPE.

0 голосов
/ 18 января 2010

самое маленькое изменение в вашем коде: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
        <title></title>
    <style>
        img {
            height: 10px;
            width: 20px;

        }
        ul li{


            display:block;
        }
        ul {
            margin: 0;
            padding-left:0;
        }
        #container {
            margin: 10px

        }
    </style>

    </head>
    <body>
    <div id="container">
    <p>
    <img src="cat.jpg"> <ul><li>Source</li><li>Item Link Title</li> </ul> </p>
    </div>
    </body>
</html>

Сказав это, остальные 2 верны. списки действительно не должны быть внутри абзаца, если вы хотите быть строгим в HTML.

0 голосов
/ 18 января 2010

Вы не можете поместить неупорядоченный список внутри абзаца (хорошо, что вы можете, но он не действителен). Я не знаю точно, что вы пытаетесь сделать, но посмотрите, поможет ли это: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <title></title>
<style type="text/css">
    img {
        height: 10px;
        width: 20px;

    }
    ul li{


        display:inline;
    }
    ul {
        display:inline;
    }
    #container {
        margin: 10px

    }
</style>

</head>
<body>
<div id="container">

<img src="la.jpg" alt=""/> <ul><li>Source</li><li>Item Link Title</li> </ul> 
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...