我正在使用XHTML格式化EPUB电子书。除了身体外，所有的造型都很精致。 body标签不会跨越视口的整个宽度，它从左边缘跨越但在右边不足。然而，p标签比身体本身伸展得更远，这使得布局略微偏离。
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style-type: none;
font-family: 'Palatino Linotype', serif;
max-width: 100vw;
min-width: 100vw;
}
body {
width: 100%;
}
#title {
font-size: 50px;
padding: 50px 30px;
}
h1, #author, .copyright {
text-align: center;
padding: 30px;
}
.ack {
text-align: center;
}
h1 {
padding: 30px;
}
p {
width: 100%;
text-align: justify;
padding: 30px;
}
a {
display: list-item;
text-align: center;
color: #d40000;
padding: 30px;
}
.page-break {
page-break-before: always;
}
#img-1 {
width: 110%;
height: 40vh;
background: url(../Images/1.jpg) no-repeat center center;
background-size: cover;
}<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Menu Selection</title>
<link rel="stylesheet" href="Styles/style.css"></link>
</head>
<body>
<h1 id="title" class="h1-space">The Menu Selection</h1>
<h2 id="author " class="copyright">Liana K. Rose</h2>
<p class="copyright">Published by Once Media</p>
<p class="copyright">© 2018 London</p>
<p class="copyright">All Rights Reserved. No part of this book may be reproduced or utilized in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage and retrieval system, without permission in writing from the publisher</p>
<h1 class="page-break">Acknowledgments</h1>
<p class="ack">To all of my friends who listened to my stories as I lived those memories. Especially Sarah, Natalie, Sharon, Katie and Aimee for also giving me the idea to write the book.</p>
<p class="ack">To all of my ‘Brothers from another Mother’. Showing me how it was from a man’s point of view.</p>
<p class="ack">My Husband for being so supportive and understanding when the creation of this book became my life.</p>
<p class="ack">A massive thank you to all the Cock Wombles I have encountered. If it wasn’t for you as a collection, I wouldn’t have had a book to write.</p>
<p class="ack">Some names and identifying details have been changed to protect the privacy of individuals.</p>
<h1 class="page-break">Contents</h1>
<div>
<a href="#one" class="contents">HOW DO YOU CHOOSE FROM THE MENU?</a>
</div>
<div>
<a href="#two" class="contents">THE ONE WHO WAS MY FIRST TRUE LOVE</a>
</div>
<div>
<a href="#three" class="contents">THE ONE WHO GAVE GREAT HEAD</a>
</div>
<div>
<a href="#four" class="contents">THE ONE WHO LIKED TO PUNISH</a>
</div>
<div>
<a href="#five" class="contents">THE ONE WHO MIXED BUSINESS WITH PLEASURE</a>
</div>
<div>
<a href="#six" class="contents">THE ONE WHO WAS A FRIEND WITH BENEFITS</a>
</div>
<div>
<a href="#seven" class="contents">THE ONE WHO WANTED TO BE THE FREAK</a>
</div>
<div>
<a href="#eight" class="contents">THE ONE WHO KNEW HOW TO PUSH MY BUTTONS</a>
</div>
<div>
<a href="#nine" class="contents">THE ONE WHO WAS MR GREY</a>
</div>
<div>
<a href="#ten" class="contents">THE ONE WHO HAD A CLASSY TWIST</a>
</div>
<div>
<a href="#eleven" class="contents">THE ONE WHO CONFUSED THE HELL OUT OF ME</a>
</div>
<div>
<a href="#twelve" class="contents">THE ONE WHO WAS A DECEIVING NORTHERNER</a>
</div>
<div>
<a href="#thirteen" class="contents">THE ONE WHO SATISFIED MY EVERY CRAVING</a>
</div>
<h1 id="one" class="page-break">How Do You Choose from the Menu?</h1>
<p>You hear men tell their friends, of their many stories of meeting up with different ladies. Dating them, seducing them and getting them into the bed, a car or even down an alley way on the side of a bar.<br />How often do you hear a woman tell similar stories so openly? And when you do hear her speak in such a way. Would you think 'whore' or 'you go girl'?</p>
<p>We are led to believe it is socially wrong for a woman to sleep around and judge her if she socialises with multiple men. But is it wrong for you to have choices?</p>
<p>Like many others I often fancy a different cuisine from time to time. Dependant on how my day has been, or the weather. <br />When it's raining and cold, I want that comfort food: sausage and mash with a splash of gravy. Fills my hole just right. <br />
When I'm sitting in a park on a hot summer’s day I am immediately attracted to a fruit cocktail. Not any fruit but the type that makes me want to explore more, make my mouth salivate.... The exotic type.</p>
<p>We are offered so many options when shopping. Whether it be walking through the supermarket to buy milk; full fat, semi skimmed or soya. Or choosing a cocktail in the bar. Fruit syrups added, a shot of caffeine with cream on top. Even an alcohol- free mocktail.</p>
<p>If we have the option to choose from an entire menu selection, to suit the mood we are in and know how it satisfies our taste buds, then why can we not do that with men?</p>
<p>There are some familiar options that we are automatically attracted to. Often, in times of need, you just want to keep it simple, stick to what you know and get what you expect.</p>
<p><strong>Comfort sex</strong> - Imagine a hard day at work. All you want is a big hug from your friend who reassures you that everything is going to be okay. What if the hug lasted the entire night? You could have a connection with that man and be in the company of just you two, enjoying that moment together. When it's time to get on with your everyday life then leave that comfort behind and get back to business single handedly</p>
<p><strong>Exciting sex</strong>Exciting sex – If you’re in need of some fun then why not speak to the man who has appeared in your life at some point. You know the one who likes to spank you, and lick you from head to toe. Puts you in positions that even you didn't think you could handle. That man who makes you feel every inch of the woman you are, when he is inside of you.</p>
<p>However it is also okay to broaden your horizons and dine somewhere completely new, with the unknown. You could enter some risks, not enjoying the experience or you could unravel a whole new you and actually be pleasantly surprised with the outcome.</p>
<p>This is not a message for you to take a different man home every night of the week. This is to let you know that you do not have to settle for something that is so different from what you are yearning for. <br />Keep selecting from the buffet menu until you have found the main dish that simply satisfies all of your cravings.</p>
<div id="img-1"></div>
</body>
</html>
我尝试过宽度：100％和100vw，我尝试使用视口元标记，但我没有想法。谁能指出我正确的方向？
答案 0 :(得分：0)
使用min-width:100vw和padding:30px查看元素，总计100vw + 30px。要解决此问题，请使用calc(100vw - 30px)作为宽度，或在任何地方使用box-sizing:border-box。
然后就是垂直滚动条的问题，它阻碍了实际上有多大的计算。因此，在这种情况下，100％优于100vw。
还有一个div width: 110%，但没有进一步的后果，因为max-width会覆盖width。我建议删除width，因为这可能会在将来混淆事项
这也允许我们摆脱min-width和max-width的一切。
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style-type: none;
font-family: 'Palatino Linotype', serif;
/* These two new lines are really all that's needed */
width:100%;
box-sizing:border-box;
/* cleaned up this
max-width: 100vw;
min-width: 100vw;*/
}
/* and this; no longer necessary
body {
width: 100%;
}
*/
#title {
font-size: 50px;
padding: 50px 30px;
}
h1, #author, .copyright {
text-align: center;
padding: 30px;
}
.ack {
text-align: center;
}
h1 {
padding: 30px;
}
p {
/* width: 100%; not needed */
text-align: justify;
padding: 30px;
}
a {
display: list-item;
text-align: center;
color: #d40000;
padding: 30px;
}
.page-break {
page-break-before: always;
}
#img-1 {
/* width: 110%; removed */
height: 40vh;
background: url(../Images/1.jpg) no-repeat center center;
background-size: cover;
}<h1 id="title" class="h1-space">The Menu Selection</h1>
<h2 id="author " class="copyright">Liana K. Rose</h2>
<p class="copyright">Published by Once Media</p>
<p class="copyright">© 2018 London</p>
<p class="copyright">All Rights Reserved. No part of this book may be reproduced or utilized in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage and retrieval system, without permission in writing from the publisher</p>
<h1 class="page-break">Acknowledgments</h1>
<p class="ack">To all of my friends who listened to my stories as I lived those memories. Especially Sarah, Natalie, Sharon, Katie and Aimee for also giving me the idea to write the book.</p>
<p class="ack">To all of my ‘Brothers from another Mother’. Showing me how it was from a man’s point of view.</p>
<p class="ack">My Husband for being so supportive and understanding when the creation of this book became my life.</p>
<p class="ack">A massive thank you to all the Cock Wombles I have encountered. If it wasn’t for you as a collection, I wouldn’t have had a book to write.</p>
<p class="ack">Some names and identifying details have been changed to protect the privacy of individuals.</p>
<h1 class="page-break">Contents</h1>
<div>
<a href="#one" class="contents">HOW DO YOU CHOOSE FROM THE MENU?</a>
</div>
<div>
<a href="#two" class="contents">THE ONE WHO WAS MY FIRST TRUE LOVE</a>
</div>
<div>
<a href="#three" class="contents">THE ONE WHO GAVE GREAT HEAD</a>
</div>
<div>
<a href="#four" class="contents">THE ONE WHO LIKED TO PUNISH</a>
</div>
<div>
<a href="#five" class="contents">THE ONE WHO MIXED BUSINESS WITH PLEASURE</a>
</div>
<div>
<a href="#six" class="contents">THE ONE WHO WAS A FRIEND WITH BENEFITS</a>
</div>
<div>
<a href="#seven" class="contents">THE ONE WHO WANTED TO BE THE FREAK</a>
</div>
<div>
<a href="#eight" class="contents">THE ONE WHO KNEW HOW TO PUSH MY BUTTONS</a>
</div>
<div>
<a href="#nine" class="contents">THE ONE WHO WAS MR GREY</a>
</div>
<div>
<a href="#ten" class="contents">THE ONE WHO HAD A CLASSY TWIST</a>
</div>
<div>
<a href="#eleven" class="contents">THE ONE WHO CONFUSED THE HELL OUT OF ME</a>
</div>
<div>
<a href="#twelve" class="contents">THE ONE WHO WAS A DECEIVING NORTHERNER</a>
</div>
<div>
<a href="#thirteen" class="contents">THE ONE WHO SATISFIED MY EVERY CRAVING</a>
</div>
<h1 id="one" class="page-break">How Do You Choose from the Menu?</h1>
<p>You hear men tell their friends, of their many stories of meeting up with different ladies. Dating them, seducing them and getting them into the bed, a car or even down an alley way on the side of a bar.<br />How often do you hear a woman tell similar stories so openly? And when you do hear her speak in such a way. Would you think 'whore' or 'you go girl'?</p>
<p>We are led to believe it is socially wrong for a woman to sleep around and judge her if she socialises with multiple men. But is it wrong for you to have choices?</p>
<p>Like many others I often fancy a different cuisine from time to time. Dependant on how my day has been, or the weather. <br />When it's raining and cold, I want that comfort food: sausage and mash with a splash of gravy. Fills my hole just right. <br />
When I'm sitting in a park on a hot summer’s day I am immediately attracted to a fruit cocktail. Not any fruit but the type that makes me want to explore more, make my mouth salivate.... The exotic type.</p>
<p>We are offered so many options when shopping. Whether it be walking through the supermarket to buy milk; full fat, semi skimmed or soya. Or choosing a cocktail in the bar. Fruit syrups added, a shot of caffeine with cream on top. Even an alcohol- free mocktail.</p>
<p>If we have the option to choose from an entire menu selection, to suit the mood we are in and know how it satisfies our taste buds, then why can we not do that with men?</p>
<p>There are some familiar options that we are automatically attracted to. Often, in times of need, you just want to keep it simple, stick to what you know and get what you expect.</p>
<p><strong>Comfort sex</strong> - Imagine a hard day at work. All you want is a big hug from your friend who reassures you that everything is going to be okay. What if the hug lasted the entire night? You could have a connection with that man and be in the company of just you two, enjoying that moment together. When it's time to get on with your everyday life then leave that comfort behind and get back to business single handedly</p>
<p><strong>Exciting sex</strong>Exciting sex – If you’re in need of some fun then why not speak to the man who has appeared in your life at some point. You know the one who likes to spank you, and lick you from head to toe. Puts you in positions that even you didn't think you could handle. That man who makes you feel every inch of the woman you are, when he is inside of you.</p>
<p>However it is also okay to broaden your horizons and dine somewhere completely new, with the unknown. You could enter some risks, not enjoying the experience or you could unravel a whole new you and actually be pleasantly surprised with the outcome.</p>
<p>This is not a message for you to take a different man home every night of the week. This is to let you know that you do not have to settle for something that is so different from what you are yearning for. <br />Keep selecting from the buffet menu until you have found the main dish that simply satisfies all of your cravings.</p>
<div id="img-1"></div>