Question

我将投资组合网站作为我的第一个编程项目，并且我在定位方面遇到了一些麻烦。我在顶部有2个元素，我想要在中心，但稍微偏离，我也将我的网页分成两列，但第二个没有完全排成一行无论什么原因。

更具体地说，顶部有一个箭头，它应位于页面的中心（水平），带有边框的文字说明＆＃34;主页＆＃34;那也应该集中。

并在右栏中标题为＆＃34;联系表格＆＃34;不与联系表单的左侧对齐，也不与提交按钮对齐。

另外我如何制作输入字段＆＃39;表格中的边框在选中时不会改变颜色。

我的HTML（它真的是一个PHP文件，因为它有一个联系表单但主要是html）：

$update_togliexp = "UPDATE utenti SET ".$compra_abi." = '".$nuovo_livello_abi."' WHERE nome = '".$nome."'";

我的CSS：

<!DOCTYPE html>
<?php include ('form_process.php');?>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/contact.css">
    <title>Contact</title>
</head>
<body>
    <div class="container-fluid top email">
        <a  href="hamburger.html" class="fa fa-arrow-up back_button" ></a>
        <p class="homepage">Home Page</p>
        <div class="email_form">  
            <div class="row">


            </div>
            <div class="row">
                <div class="left col-sm-4 col-sm-offset-1 hidden-xs">
                    <h3>Contact Me</h3>
                    <p class="">If you want to get in touch with me, I'd love to talk! Feel free to use the contact form to the right, or contact me on social media.</p>
                    <p>mail: myemail@gmail.com</p>
                    <h3>Find Me On</h3>
                    <p>facebook twitter instagram</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ullam, veritatis quo. Voluptate, nihil odio cum. Voluptas ipsam, sit accusantium rem perferendis, voluptatibus obcaecati quisquam adipisci eum, id dignissimos aliquam non. Sequi culpa, modi quod, repellendus, doloribus incidunt excepturi fugiat aperiam totam quos provident voluptatibus aliquid voluptate repellat at suscipit vel dicta alias? Sint accusantium nihil qui sit voluptates assumenda suscipit quod nulla asperiores tempora, modi eaque quis non expedita odit ipsum, illo ad praesentium labore! Fugiat officiis natus suscipit. Architecto aut neque minima dolorum iste saepe totam voluptas earum, tempora fugit ullam harum velit debitis maxime provident. Recusandae, aliquam.</p>
                </div>
                <div class="col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-2">
                    <form id="contact" action="<?= $_SERVER['PHP_SELF'];?>" method="post">
                        <h3>Contact Form</h3>
                        <div class="form-group row">

                            <div>
                                <label for="name">Name*</label>
                                <input class="form-control input-default" id="name" placeholder="Your Full Name" type="text" tabindex="1" size="30" name="name" value="<?= $name ?>" autofocus>
                                <span class="error"><?= $name_error?> </span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div >
                                <label for="email">Email Address*</label> 
                                <input class="form-control input-default" id="email" placeholder="Your Email Address" type="text" name="email" value="<?= $email ?>" tabindex="2" >
                                <span class="error"><?= $email_error?> </span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div >
                                <label for="subject">Subject*</label> 
                                <input class="form-control input-default" id="subject" placeholder="Your Subject" type="text" name="subject" value="<?= $subject ?>" tabindex="2" >
                                <span class="error"><?= $subject_error?> </span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div >
                                <label for="message">Message*</label>
                                <textarea placeholder="Type your Message Here...." class="message1 form-control input-default" rows="5" id="message" name="message" tabindex="5" ><?php if(isset($_POST['message'])){ 
                                    echo htmlentities ($_POST['message']); }?></textarea>
                                    <span class="error"><?= $message_error?></span> 
                                </div>
                            </div>
                            <div>
                                <button class="btn-default btn rbutton" name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
                            </div> 
                            <div class="success"><?= $success;?></div>
                        </form>

                    </div>

                </div>


            </div>
        </div>
    </body>
    </html>

Answer 1

您要做的第一件事就是将按钮从display: inline-block更改为display: block。不是给它margin-left: 50%，而是要让它margin 0 auto自动在中间对齐它，并设置一个固定的width：

.homepage {
  display: block;
  width: 100px;
  margin: 0 auto;
}

至于您的.back_button，它需要类似的规则：

.fa.back_button {
  display: block !important;
  margin: 15px auto 10px;
}

请注意，选择器已更改为.fa.back_button。这是为了增加特异性并覆盖稍微更具体的FontAwesome规则。额外的边距只返回到它显示为inline-block元素的方式。

让Contact Form标题和提交按钮对齐的最简单方法是抵消Boostrap添加的col类。这可以通过简单地给它们row类来完成，这会增加相关的负边距：

<h3 class="row">Contact Form</h3>
 ...
<div class="row">
  <button class="btn-default btn rbutton" name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</div>

对于悬停时改变颜色的边框，这一切都来自Bootstrap：

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

只需覆盖这些规则即可解决问题：

.form-control:focus {
  border-color: white;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

这可以在 this example 中看到。

Answer 2

玩了一下，除了其中一个问题元素之外我删除了所有问题，让我几乎只为html做了这个：

<body>
    <p class="homepage">Home Page</p>
</body>

这有助于隔离它。大。但是，仍然向右偏移。

看看CSS，似乎问题是左边距和右边距：

margin-left: 50%;
margin-right: 50%;

这不是将文本居中的好方法，因为你已经使边距占据了宽度的100％。它将开始绘制左边距右侧的文本，这意味着在页面中间，并保持向右绘制，使其偏离中心。

可能还有另一种方法可以让它居中。也许将它包装在另一行并让bootstrap处理它？这意味着要删除CSS中.back-button和.homepage上的margin-margin和margin-right，并将其用于html中的那些元素：

<div class="row">
  <div class="text-center">
        <a  href="hamburger.html" class="fa fa-arrow-up back_button" ></a>
  </div>
</div>
<div class="row">
  <div class="text-center">
        <p class="homepage">Home Page</p>
  </div>
</div>

你应该能够通过类似的故障排除来找到解决其他对齐问题的方法（看起来在我打字的时候至少有一个其他的答案，呵呵）。

似乎无法让我的定位正确。 CSS

2 个答案: