Question

你好，请看图片，我必须让红色框文字与“我的标题”对齐，现在我已经手动修复了这个，但是当我调整窗口大小时，它就到了外面。

我知道如果我不使用绝对位置但是必须使用绝对位置，我可以使它对齐，因为我必须在每个页面上动态调用此部分。

那我该怎么做呢？

这是我的代码

<!DOCTYPE html>
<html>
<head>
    <title></title>


<style type="text/css">

body{
    margin:0px;
}

.name-list{
        position: absolute;
    right: 167px;

}

.name-list ul{
    list-style: none; padding-left: 0px;

}

.name-list ul li{
    float: left; padding-right: 10px;
    background:red; color: white;
}

.box{
    background:#38383d; padding: 10px; float: right; color: white; width:20%;
}

</style>    


</head>
<body>

<div class="name-list">
<ul>
    <li >Name</li>
    <li>Surname</li>
</ul>
</div>

<div class="box">


<br>

<h2>My Heading</h2>

</div>

</body>
</html>

Answer 1

＆＃13;

<style type="text/css">
    body{
        margin:0px;
    }
    
    .name-list{
            position: absolute; 
    }
    .name-list ul{
        list-style: none; padding-left: 0px;
     }
    .name-list ul li{
        float: left; padding-right: 10px;
        background:red; color: white;
    }
    .box{
        background:#38383d; padding: 10px; float: right; color: white; 
    }
    </style>

＆＃13;

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
         
    </head>
    <body>
    <div class="box">
    <div class="name-list">
    <ul>
        <li >Name</li>
        <li>Surname</li>
    </ul>
    </div>
    <br>
    <h2>My Heading</h2>
    </div>
    </body>

＆＃13;

Answer 2

由于您无法更改html，因此最佳路线是使用百分比来放置和调整.name-list

我用这段代码得到了最好的结果：

.name-list{
    position: absolute;
    right: 3%;
    width:18%

}

代码段：

body{
    margin:0px;
}

.name-list{
    position: absolute;
    right: 3%;
    width:18%
}

.name-list ul{
    list-style: none; 
    padding-left: 0px;
}

.name-list ul li{
    float: left; 
    padding-right: 10px;
    background:red; 
    color: white;
}

.box{
    background:#38383d; 
    padding: 10px; 
    float: right; 
    color: white; 
    width:20%;
}

<div class="name-list">
  <ul>
    <li >Name</li>
    <li>Surname</li>
  </ul>
</div>

<div class="box">
  <br>
  <h2>My Heading</h2>
</div>

不幸的是，如果不修改你的HTML，我就能做到最好。

Answer 3

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title></title>
 <style type="text/css">
body{
    margin:0px;
}

.name-list{
        position: absolute; 
}
.name-list ul{
    list-style: none; padding-left: 0px;
 }
.name-list ul li{
    float: left; padding-right: 10px;
    background:red; color: white;
}
.box{
    background:#38383d; padding: 10px; float: right; color: white; width:20%;
}
</style>    
</head>
<body>
<div class="box">
<div class="name-list">
<ul>
    <li >Name</li>
    <li>Surname</li>
</ul>
</div>
<br>
<h2>My Heading</h2>
</div>
</body>

＆＃13;

Answer 4

我认为这会对你有帮助..

<!DOCTYPE html>
<html>
<head>
    <title></title>


<style type="text/css">

body{
    margin:0px;
}

.name-list{
        position: absolute;
        left: 10px;
}

.name-list ul{
    list-style: none; padding-left: 0px;

}

.name-list ul li{
    float: left; padding-right: 10px;
    background:red; color: white;
}

.box{
    padding: 10px; float: right; color: white; width:250px;
}
.custom {background:#38383d;display: inline-flex;float: right;position: relative; }
</style>    


</head>
<body>
<div class='custom'>
    <div class="name-list">
        <ul>
            <li >Name</li>
            <li>Surname</li>
        </ul>
    </div>
    <div class="box">
        <br>
        <h2>My Heading</h2>
    </div>
</div>
</body>
</html>

Answer 5

使用这些css来获得结果，希望这对您有所帮助。

＆＃13;

body {
  margin: 0px;
}

.name-list {
	position: absolute;
	left: 10px;
}

.name-list ul {
  list-style: none;
  padding-left: 0px;
}

.name-list ul li {
  float: left;
  padding-right: 10px;
  background: red;
  color: white;
}

.box {
  background: #38383d;
  padding: 10px;
  float: right;
  color: white;
  width: 20%;
  position:relative;
}

＆＃13;

<html>
<body>
<div class="box">
<div class="name-list">
<ul>
    <li >Name</li>
    <li>Surname</li>
</ul>
</div>
<br>
<h2>My Heading</h2>
</div>
</body>
</html>

＆＃13;

如何使用绝对位置进行文本对齐

5 个答案: