Question

我对HTML和CSS比较陌生，正在努力重建网站。

我的（草率）代码在这里： CSS和HTML

我想知道如何将我的文本正确对齐div的右侧。

Answer 1

使文本容器具有绝对定位，然后将其定位到其父级的顶部和右侧。

您还需要确保父元素相对定位。

head{font-family: Verdana, Geneva, sans-serif; 
}
body{background-color: #C0C0C0;
}
p{font-family: "Courier New", Courier, monospace;
}
.borderlist{
	list-style-position:inside;
	list-style-type:none;
}
.header{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 50px;
	float: left-side;
	padding-top: 20px;
	padding-left: 50px;
	
}
a:link, a:visited, a:active{
	text-decoration: none;
	color: #292421;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 20px;
	display: inline-block;
	border : 4px solid orange;
	width: 275px;
	padding: 30px;
	background-color: #D3D3D3;
	
}
a:hover{
	text-decoration: none;
	color: #292421;
	font-family: Verdana, Geneva, sans-serif;
	display: inline-block;
	border : 4px solid #ee7600;
	padding: 30px;
	background-color: #E8E8EE;
}
.div_top{
	background-color: #E18A07;
	width: 700px;
	height: 300px;
	padding-left: 50px;
	padding-top: 75px;
	margin-left: 75px;
	float:left;
  position:relative;
}
.div_top_text{
	width: 75px;
    top:0px;
    right:0px;
    position:absolute;
	padding-right: 20px;
    vertical-align:top;
}
.br_bigger{
	margin: 100px;
	padding: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style_test.css">
<title>Freepbx Support</title>
</head>
<body>
<header class="header"><b>FreePBX</b> Support</header>
<br>
<div class="div_top">
	<li class="borderlist"><a href="www.google.com">FreePBX initial setup</a></li>
	<br>
	<br>
	<br>
	<li class="borderlist"><a href="www.google.com">FreePBX Advanced setup</a></li>
	<div class="div_top_text">FreePBX tech was created for beginners or experts of the open source pbx system. Read our documents or watch our help videos to learn how to use the latest version of FreePBX</div>
	</div>
</body>
</html>

Answer 2

试试这个，这个解决方案将负责调整浏览器的大小。 *注意：我注意到你使用的是li标签，我没有看到任何ul标签，通常是li和ul一起使用

public static int charFrequency (String[]s, char c){

    int freq = 0;
    for(String s2 : s) {
        char[] newArray = createChars(s2);
        for (char c2: newArray)
            if(c2 == c) freq++;
    }
}

.list-boxer{
    float: left;
}
.list{
    width: 275px;
  
    list-style: none;
    margin: 0px 0px;
    padding: 0px 0px;
}
.list li{
    width: inherit;
    font-family: Verdana, Geneva, sans-serif;
	display: inline-block;
	padding: 0px;
}
.list li a{
   display: block;
   padding: 30px 30px;
   margin: 25px 0px;
   border : 4px solid #ee7600;
}
.div_top_text_boxer{
    overflow: hidden;
    padding: 25px;
}
.div_top_text{
    width: 98%;
    padding: 1%;
}

如何将列表和文本与div标签并排对齐？

2 个答案: