Question

菜单按钮将标题推到一边。如何确定标题忽略推动？守则如下。我听说清楚，但它不起作用。 ist是元素的填充或边距吗？

＆＃13;

html {
	height: 100%;
	width: 100%;
}

body {
	background: linear-gradient(to bottom, #0e4675 25%,#00215a 75%);	
}

#in {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

main {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

#header {
	border-bottom: 3px solid #ffffff;
}

#heading {
    font-family: "Open Sans";
	color: #ffffff;
	text-transform: uppercase;
	border: 5px solid #ffffff;
	display: inline-block;
	padding-bottom: 4px;
	padding-left: 6px;
	letter-spacing: 0.01em;
	padding-right: 6px;
	margin-top: 16px;
	transition: all 1.5s;
	display: inline-block;
	clear: both;
}

#navigationbutton {
	float: left;
	clear: both;
	display: inline-block;
	width: 38px;
	height: 38
}

.text {
	color: #ffffff;
}

＆＃13;

<body>
		<div id="app">
			<div id="in">
				<header id="header">
                    <h1 id="heading">App-Title</h1>
                    <img id="navigationbutton" src="media/image/navigation.svg">
                </header>
				<main id="main">
					<div id="textarea">
					<p class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
					</div>
				</main>
			</div>
		</div>
	</body>

＆＃13;

Answer 1

也许您需要将“标题”设为具有相对位置的块，并导航到具有绝对位置的块：

html {
	height: 100%;
	width: 100%;
}

body {
	background: linear-gradient(to bottom, #0e4675 25%,#00215a 75%);	
}

#in {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

main {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

#header {
  display:block;
	border-bottom: 3px solid #ffffff;
  position:relative;top:0;left:0;
}

#heading {
    font-family: "Open Sans";
	color: #ffffff;
	text-transform: uppercase;
	border: 5px solid #ffffff;
	display: inline-block;
	padding-bottom: 4px;
	padding-left: 6px;
	letter-spacing: 0.01em;
	padding-right: 6px;
	margin-top: 16px;
	transition: all 1.5s;
	display: inline-block;
	clear: both;
}

#navigationbutton {

	width: 38px;
	height: 38px;
    position:absolute;top:5px;left:5px;
}

.text {
	color: #ffffff;
}

<body>
		<div id="app">
			<div id="in">
				<header id="header">
                    <h1 id="heading">App-Title</h1>
                    <img id="navigationbutton" src="media/image/navigation.svg">
                </header>
				<main id="main">
					<div id="textarea">
					<p class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
					</div>
				</main>
			</div>
		</div>
	</body>

Answer 2

嗯，我不太确定我是否帮助你。但是，如果您只想将h1元素移回左侧，则可以简单地为其添加负边距。

我在#heading ID中添加了一个负左边距。

＆＃13;

html {
	height: 100%;
	width: 100%;
}

body {
	background: linear-gradient(to bottom, #0e4675 25%,#00215a 75%);	
}

#in {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

main {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

#header {
	border-bottom: 3px solid #ffffff;
}

#heading {
    font-family: "Open Sans";
	color: #ffffff;
	text-transform: uppercase;
	border: 5px solid #ffffff;
	display: inline-block;
	padding-bottom: 4px;
	padding-left: 6px;
	letter-spacing: 0.01em;
	padding-right: 6px;
	margin-top: 16px;
    margin-left:-38px;
	transition: all 1.5s;
	display: inline-block;
	clear: both;
}

#navigationbutton {
	float: left;
	clear: both;
	display: inline-block;
	width: 38px;
	height: 38
}

.text {
	color: #ffffff;
}

＆＃13;

<body>
		<div id="app">
			<div id="in">
				<header id="header">
                    <h1 id="heading">App-Title</h1>
                    <img id="navigationbutton" src="media/image/navigation.svg">
                </header>
				<main id="main">
					<div id="textarea">
					<p class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
					</div>
				</main>
			</div>
		</div>
	</body>

＆＃13;

Answer 3

2件事，使用最大宽度，因为如果你在我的屏幕上收缩它，身体比窗口大。另外，只需使用绝对定位。

        html {
            height: 100%;
            width: 100%;
        }

        body {
            background: linear-gradient(to bottom, #0e4675 25%,#00215a 75%);    
        }

        #in {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }

        main {
            width: 80%;
            margin-left: auto;
            margin-right: auto;
        }

        #header {
            border-bottom: 3px solid #ffffff;
            position:relative;
        }

        #heading {
            font-family: "Open Sans";
            color: #ffffff;
            text-transform: uppercase;
            border: 5px solid #ffffff;
            display: inline-block;
            padding-bottom: 4px;
            padding-left: 6px;
            letter-spacing: 0.01em;
            padding-right: 6px;
            margin-top: 16px;
            transition: all 1.5s;
            display: inline-block;
            clear: both;
        }

        #navigationbutton {
            position: absolute;
            left: 0;
            display: inline-block;
            width: 38px;
            height: 38
        }

        .text {
            color: #ffffff;
        }

如何将标题居中？

3 个答案: