Question

我有一个菜单栏，我想删除个人资料标记，因此我添加了<ul>

<html>
<head>
    <title><?php $title; ?></title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <meta charset="utf-8">

    <div class="centrado-fluid">
    <div class="loginregister"></div>
    <div class="espacio"></div>
    <div class="menu">
        <a href="index.php"><p class="menuleft">Home</p></a>
        <a href="pelis.php"><p class="menuleft">Películas</p></a>
        <a href="series.php"><p class="menuleft">Series</p></a>
        <input class="buscador" type="text" placeholder="Busca">
        <a href="apeli.php"><p class="menuright">Añadir Serie</p></a>
        <a href="aserie.php"><p class="menuright">Añadir Película</p></a>
        <ul><p class="menuright">Profile</p></ul>
    </div>
    <hr class="linea">
    </div>

</head>
<body>

当我将<ul>个<p>个人资料放入

时

这是css

.centrado-fluid {
    height: 100%;
    width: 80%;
    background-color: #ffffff;
    margin: 0 auto;
}

.menu {
    height: 44px;
    width: auto;
    /*background-color: blue;*/
    background: url("../img/slash-layer.png") repeat scroll 0% 0% rgb(99, 99, 130);
    border-radius: 15px;
    padding-top: 10px;
}

.espacio {
    height: 10px;
}

.menuleft {
    width: 100px;
    height: auto;
    margin-top: -2px;
    margin-left: 15px;
    text-align: center;
    background-color: yellow;
    border-radius: 10px;
    font-family: hasa;
    font-size: 20px;
    padding-top: 5px;
    display: inline;
}

.buscador {
    height: auto;
    margin-top: -2px;
    margin-left: 7%;
    text-align: center;
    background-color: whitesmoke;
    border-radius: 10px;
    font-family: hasa;
    font-size: 20px;
    padding-top: 5px;
    display: inline;
}

.menuright {
    height: auto;
    margin-top: -2px;
    float: right;
    margin-right: 15px;
    text-align: center;
    background-color: yellow;
    border-radius: 10px;
    font-family: hasa;
    font-size: 20px;
    padding-top: 5px;
    display: inline;
}

我如何归还？

Answer 1

<ul>标记具有默认边距和段落空格。所以不要使用UL标签。简单使用<p>代码

Answer 2

要标记您的菜单，您可以执行以下操作： JSFiddle Demo

<强> HTML

<ul class="menu">
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li class="right"><a href="#">link</a></li>
    <li class="right"><a href="#">link</a></li>
</ul>

<强> CSS

* { margin:0; padding:0; }    
ul.menu { float:left; width:100%; }
ul.menu li { float:left; margin:0 10px; list-style: none;}
ul.menu a { display:inline-block; padding:5px 10px; background:yellow; }
ul.menu .right { float:right;}

Answer 3

您的HTML在有效性方面存在一些问题。尝试使用http://validator.w3.org/#validate_by_input检查您的代码：

你迟到了<head>;从<div class="centrado-fluid">开始，您必须将所有内容都包含在<body>
<p>不允许在<a>内，但反过来。
<ul>的子项允许的唯一元素是<li>

解决问题的最佳方法是在解决原始问题之前修复HTML。

Ul改变了我的风格

3 个答案: