Question

我正在制作一个带有下拉菜单的菜单，我遇到了一个问题：我无法将子菜单项的文本居中对齐。

＆＃13;

body {
  margin: 0px;
  padding: 0px;
}

.menu {
  display: inline-block;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #4c4e5a;
}

.menu li {
  position: relative;
  list-style-type: none;
  float: left;
}

.menu li a {
  display: inline-block;
  padding: 15px 10px;
  text-decoration: none;
}

.menu ul {
  display: none;
  position: absolute;
  top: 48px;
  background-color: #1f2024;
}

.menu ul li a {
  display: inline-block;
  width: auto;
  padding: 10px;
  text-align: center;
}

.menu li:hover>ul {
  display: block;
}

＆＃13;

<ul class="menu">
  <li><a href="#" id="active">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Dropdown</a>
    <ul>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
    </ul>
  </li>
</ul>

＆＃13;

My problem looks like this

那么，我该如何将该文本居中？

Answer 1

在padding:0;

上添加menu ul

.menu ul {
    background-color: #1f2024;
    display: block;
    padding: 0;/*Add This Property*/
    position: absolute;
    top: 48px;
}

https://jsfiddle.net/0bcjod8c/

Answer 2

在 .menu ul 上添加padding:0px;width:100%;并添加一行.menu ul li{text-align:center;width:100%;}

<html><head>
<style type="text/css">
body {
            margin:0px;
            padding:0px;
}
.menu {
            display:inline-block;
            width:100%;
            list-style-type: none;
            margin: 0;
            padding: 0;
            background-color: #4c4e5a;
}
.menu li {
            position: relative;
            list-style-type: none;
            float: left;
}
.menu li a {
            display:inline-block;
            padding: 15px 10px;
            text-decoration: none;
}
.menu ul {
            display: none;
            position: absolute;
            padding:0px;width:100%;
            top:48px;
            background-color: #1f2024;
}
.menu ul li{text-align:center;width:100%;}
.menu ul li a {
            display:inline-block;
            width:auto;
            padding:10px;
            text-align:center;
}
.menu li:hover > ul {
            display:block;
}
</style>
</head>
<body>
<ul class="menu">
        <li><a href="#" id="active">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Dropdown</a>
            <ul>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>
        </li>
</ul>
</body>
</html>

Answer 3

只需在CSS样式表中添加一个类

handleDelete(){
    var id = this.props.id; 
    $.ajax({ 
        type:"DELETE",
        url:`http://localhost:3000/api/posts/${id}`, 
        success: function(res) { 
            setTimeout(function () {
              location.pathname="/user";
            }, 500);
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(xhr, status, err.toString());
        }.bind(this)
      }); 
  }

这应该做的工作。

Answer 4

下拉列表项应具有宽度：100％;

.menu li:hover > ul li {
        display:block;
        width:100%;
}

Answer 5

我为ul和li属性创建了一个链，就像跟随css一样，因为我需要捕获.menu li > ul > li。

我认为它可能适合你。

更新css

.menu li ul li {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.menu li:hover > ul {
   display: block;
   padding: 0px;
}

body {
  margin: 0px;
  padding: 0px;
}

.menu {
  display: inline-block;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #4c4e5a;
}

.menu li {
  position: relative;
  list-style-type: none;
  display: inline-block;
}

.menu li a {
  display: inline-block;
  padding: 15px 10px;
  text-decoration: none;
}

.menu ul {
  display: none;
  position: absolute;
  top: 48px;
  background-color: #1f2024;
}

.menu li ul li {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.menu ul li a {
  display: inline-block;
  width: auto;
  padding: 10px;
  text-align: center;
}

.menu li:hover>ul {
  display: block;
  padding: 0px;
}

<ul class="menu">
  <li><a href="#" id="active">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Dropdown</a>
    <ul>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
    </ul>
  </li>
</ul>

下拉中心文字

5 个答案: