Question

我已使用以下代码定义了一个html / css页面：

＆＃13;

<!DOCTYPE html>
<html><head>
<title>TEST1</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.main-rows {
	display: flex;
	flex-flow: column;
}

.main-columns {
	display: flex;
	flex-flow: row;
}

.dividerv {
	background: black;
	width: 4px;
}

.dividerh {
	background: black;
	height: 4px;
}

</style>
</head>
<body>
	<div class="main-rows">
		<div>
		This is an example text <br/>
		This is an example text <br/>
		This is an example text <br/>
		This is an example text <br/>
		<br/>
		<br/>
		</div>

		<div class="dividerh"></div>

		<div class="main-columns">
			<div class="dividerv"></div>
			<div class="main-rows">
				<div style="border: 1px solid black;">
					<button style="margin: 0 auto;">&rarr;</button>
					<div>blah, blah, blah, blah</div>
					<button>&larr;</button>
				</div>
				<div style="border: 1px solid black;">
					<button style="margin: 0 auto;">&rarr;</button>
					<div>blah, blah, blah, blah</div>
					<button>&larr;</button>
				</div>
			</div>
			<div class="dividerv"></div>
			<div class="main-rows">
				<div style="border: 1px solid black;">
					<button style="margin: 0 auto;">&rarr;</button>
					<div>blah, blah, blah, blah</div>
					<button>&larr;</button>
				</div>
			</div>

			<div class="dividerv"></div>
		</div>
	</div>
</body>
</html>

＆＃13;

主要问题是：如何用箭头水平居中按钮？我已根据＆＃34; text-align＆＃34;测试了几种解决方案。和类似但没有成功（请在标记为重复之前考虑到这一点）。

此外，欢迎如何简化此代码。特别是，如何跳过重复块的需要：

            <div style="border: 1px solid black;">
                <button style="margin: 0 auto;">&rarr;</button>
                <div>blah, blah, blah, blah</div>
                <button>&larr;</button>
            </div>

仅在与每个按钮相关的操作（＆＃34; onclick＆＃34;函数）和按钮之间出现的文本中从一个更改为另一个。可能是一个javascript解决方案可以允许这部分。

非常感谢。

Answer 1

只需将此添加到您的css：

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

你需要一直重复它，HTML没有变量之类的东西。

您可以使用HTML代码创建一个PHP文件，然后通过PHP（<?php include "filename.php" ?>）将其包含在内，这可以通过javascript完成，但在另一种方式上。

＆＃13;

.main-rows {
	display: flex;
	flex-flow: column;
}

.main-columns {
	display: flex;
	flex-flow: row;
}

.dividerv {
	background: black;
	width: 4px;
}

.dividerh {
	background: black;
	height: 4px;
}

button{
  display: block;
  margin: 0 auto;
  }

＆＃13;

<!DOCTYPE html>
<html><head>
<title>TEST1</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
	<div class="main-rows">
		<div>
		This is an example text <br/>
		This is an example text <br/>
		This is an example text <br/>
		This is an example text <br/>
		<br/>
		<br/>
		</div>

		<div class="dividerh"></div>

		<div class="main-columns">
			<div class="dividerv"></div>
			<div class="main-rows">
				<div style="border: 1px solid black;">
					<button style="margin: 0 auto;">&rarr;</button>
					<div>blah, blah, blah, blah</div>
					<button>&larr;</button>
				</div>
				<div style="border: 1px solid black;">
					<button style="margin: 0 auto;">&rarr;</button>
					<div>blah, blah, blah, blah</div>
					<button>&larr;</button>
				</div>
			</div>
			<div class="dividerv"></div>
			<div class="main-rows">
				<div style="border: 1px solid black;">
					<button style="margin: 0 auto;">&rarr;</button>
					<div>blah, blah, blah, blah</div>
					<button>&larr;</button>
				</div>
			</div>

			<div class="dividerv"></div>
		</div>
	</div>
</body>
</html>

＆＃13;

Answer 2

像这样更新你的CSS。

    private bool isAvailable;
    private void foo()
    {
        if(isAvailable)
        {
            isAvailable = false;
            DoSomething();
            isAvailable = true;
        }
    }

html / css：div

2 个答案: