Question

然后我想并排放两个文本，然后通过设置width和display: inline-block来完成。

问题在于，当我在Chrome中调整页面大小时，而不是停留在中心位置，文本块会随着调整大小而浮动。

我尝试将边距，填充更改为自动或自定义，我尝试放置包装但我绝不能让它们不移动。我找到了关于调整大小的内容但是每个主题都有一个自己的例子，这对我的网站不起作用。

.contactnumber {
	font-family: "Raleway", sans-serif;
	font-size: 50px;
	font-weight: 100;
}
#condesc {
	display: inline-block;
	font-family: "Raleway", sans-serif;
	font-size: 50px;
	font-weight: 100;
}
.pcontactnumber {
	position: inherit;
	font-family: "Raleway", sans-serif;
	font-size: 25px;
	font-weight: bold;
}
.adresa {
	position: inherit;
	display: inline-block;
	font-family: "Raleway", sans-serif;
	font-size: 50px;
	font-weight: 100;
}
.padresa {
	display: inline-block;
	float: right;
	width: 640px;
	font-family: "Raleway", sans-serif;
	font-size: 25px;
	font-weight: bold;
}

<h3 id="condesc" style="width: 615px">Phone numbers</h3>
<h4 class="adresa">Adress:</h4>
<p class="padresa">Rruga (this is my address), x/a, Prizren 20040</p>
<p class="pcontactnumber" style="width: 163px">049/xxx-yyy</p>
<p class="pcontactnumber" style="width: 160px">049/yyy-xxx</p>
<p class="pcontactnumber" style="width: 153px">044/xyx-yxy</p>

这是初学者的东西，但我刚开始使用HTML / CSS，这是我的第一个正确的项目。谢谢！

Answer 1

每个块上的媒体查询和width: 50%组合怎么样？

＆＃13;

.contactnumber {
  font-family: "Raleway", sans-serif;
  font-size: 50px;
  font-weight: 100;
}
#condesc {
  display: inline-block;
  font-family: "Raleway", sans-serif;
  font-size: 50px;
  font-weight: 100;
}
.pcontactnumber {
  position: inherit;
  font-family: "Raleway", sans-serif;
  font-size: 25px;
  font-weight: bold;
}
.adresa {
  position: inherit;
  display: inline-block;
  font-family: "Raleway", sans-serif;
  font-size: 50px;
  font-weight: 100;
}
.padresa {
  display: inline-block;
  width: 640px;
  font-family: "Raleway", sans-serif;
  font-size: 25px;
  font-weight: bold;
}
.half {
  width: 50%;
  float: left;
}
@media(max-width: 768px) {
  .half {
    width: 100%;
    float: none;
  }
}

＆＃13;

<div class="half">
  <h3 id="condesc">Phone numbers</h3>
  <p class="pcontactnumber" style="width: 163px">049/xxx-yyy</p>
  <p class="pcontactnumber" style="width: 160px">049/yyy-xxx</p>
  <p class="pcontactnumber" style="width: 153px">044/xyx-yxy</p>
</div>
<div class="half">
  <h3 class="adresa">Adress:</h3>
  <p class="padresa">Rruga (this is my address), x/a, Prizren 20040</p>
</div>

＆＃13;

Answer 2

将所有文字放在一个div中并给它

div {
   display: block;
   margin: 0 auto;
}

这应该使文本居中并将它们保持在中心

Answer 3

您可以尝试添加div和属性显示选项：flex

.contactnumber {
	font-family: "Raleway", sans-serif;
	font-size: 50px;
	font-weight: 100;
}
#condesc {
	display: inline-block;
	font-family: "Raleway", sans-serif;
	font-size: 50px;
	font-weight: 100;
}
.pcontactnumber {
	position: inherit;
	font-family: "Raleway", sans-serif;
	font-size: 25px;
	font-weight: bold;
}
.adresa {
	position: inherit;
	display: inline-block;
	font-family: "Raleway", sans-serif;
	font-size: 50px;
	font-weight: 100;
}
.padresa {
	display: inline-block;
	float: left;
	width: 100%;
	font-family: "Raleway", sans-serif;
	font-size: 25px;
	font-weight: bold;
}
.phone {
  width: 100%;
  text-align: center;
}
.block-flex {
  display: flex;
  justify-content: space-around;
}

<div class="block-flex">
  <h3 id="condesc">Phone numbers</h3>
  <h4 class="adresa">Adress:</h4>
</div>
<div class="block-flex">
  <div class="phone">
    <p class="pcontactnumber">049/xxx-yyy</p>
    <p class="pcontactnumber">049/yyy-xxx</p>
    <p class="pcontactnumber">044/xyx-yxy</p>
  </div>
  <div>
    <p class="padresa">Rruga (this is my address), x/a, Prizren 20040</p>
  </div>
</div>

Answer 4

首先，既然你开始学习HTML / CSS，这里有一些关于CSS的提示：

1 - 类（例如＆＃39; .my-class＆＃39;）意味着可重用，因此我建议您将可重用的CSS规则重新组合为一个或多个类，并将此类添加到共享该类的所有元素中相同的参数，而不是在每个类重新调整相同的规则。

请记住，您可以将多个类添加到单个元素中。

如果您需要针对特定元素的特定CSS规则，则在使用＆＃34; id＆＃34;时，专用于此元素。

从长远来看，这将更容易维护。

2 - 尽量避免使用样式属性向元素添加CSS规则。这不是一个好主意，因为你混合了东西（结构：HTML与布局/设计：CSS）。它可能会让浏览器感到困惑。

3 - 当您希望布局具有响应性时，请尝试mobile first方法。基本上，您只需开始设计最小的设备，然后添加规则以通过media query更新元素的显示方式

这是一个关于如何创建一个简单的网格＆＃34;的例子。将所有元素显示为列表，然后在较大的屏幕上重新排序。

你可以看一下像bootstrap那样的CSS框架，这些框架可以与其他许多结构一起使用。

＆＃13;

body {
	font-family: "Raleway", sans-serif;
}

.row {
	display: block;
	position: relative;
}

.col-12, 
.col-13, 
.col-14, 
.col-34 {
	margin-left: 1%;
	margin-right: 1%;
	widht: 100%;
}

@media screen and (min-width: 480px) {

	.row div {
		float: left;
	}

	.col-12 {
		width: 48%;
	}

	.col-13 {
		width: 31%;
	}

	.col-14 {
		width: 23%;
	}

	.col-34 {
		width: 73%;
	}
}

＆＃13;

<div class="row">
	<div class="col-12">
		<h3>Phone numbers</h3>
		<p><strong>049/xxx-yyy</strong></p>
		<p><strong>049/yyy-xxx</strong></p>
		<p><strong>044/xyx-yxy</strong></p>
	</div>
	<div class="col-12">
		<div class="row">
			<div class="col-14">
				<h4 class="address">Adress:</h4>
			</div>
			<div class="col-34">
				<p class="">Rruga (this is my address), x/a, Prizren 20040</p>
			</div>
		</div>
	</div>
</div>

＆＃13;

调整HTML文本/元素大小的问题

4 个答案: