Question

我希望链接位于“info” div的左侧，但我无法找到方法，text-align: left;无效。我认为CSS可能会干扰text-align属性。

@font-face {
   font-family: myFirstFont;
   src: url(Minecraftia.ttf);
}


a {
	   font-family: myFirstFont;
    text-decoration: none;
    font-size: 13px;
}
div#comment {

    border-radius: 4px;
    margin: 0 auto;
    padding: 0 3px;
    width: 600px;
}
input[type=submit] {
    background-color: white;
    font-size: large;
    padding: 14px 20px;
    margin: 8px 0;
    border: 3px solid green;
    border-radius: 10px;
    cursor: pointer;
    font-family: myFirstFont;
    text-align: center;
}
input[type=text], input[type=mail], select {
    width: 600px;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #CCC;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #F8F8F8;
    font-family: myFirstFont;
}
textarea {
    width: 600px;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #CCC;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #F8F8F8;
    font-family: myFirstFont;
    resize: none;
}
p
{    
font-family: myFirstFont;
    font-size: 13px;
	    margin: 0 auto;
	
}
div#info {
    border-radius: 4px;
    margin: 0 auto;
    padding: 0 3px;
    width: 600px;
	    border-bottom: 1px solid green;
}
form {
    text-align: center;
}

<div id="info"><p>Pringui - 25 août 2016 - <a    href="Modifier.php">Modifier</a></p></div><div id="comment"> <p>Hello World.</p></div>

Answer 1

如果我了解您的想法，那么您就不需要编辑CSS了。您可以将锚点移动到该div内部内容的左侧。或者如果你想在div之前完全将它移到div之外。如果这不是一个选项，你可以向右浮动div，然后向左浮动锚。但这是一个非常草率的解决方案。只需重新排列HTML即可。

＆＃13;

@font-face {
   font-family: myFirstFont;
   src: url(Minecraftia.ttf);
}


a {
	   font-family: myFirstFont;
    text-decoration: none;
    font-size: 13px;
}
div#comment {

    border-radius: 4px;
    margin: 0 auto;
    padding: 0 3px;
    width: 600px;
}
input[type=submit] {
    background-color: white;
    font-size: large;
    padding: 14px 20px;
    margin: 8px 0;
    border: 3px solid green;
    border-radius: 10px;
    cursor: pointer;
    font-family: myFirstFont;
    text-align: center;
}
input[type=text], input[type=mail], select {
    width: 600px;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #CCC;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #F8F8F8;
    font-family: myFirstFont;
}
textarea {
    width: 600px;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #CCC;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #F8F8F8;
    font-family: myFirstFont;
    resize: none;
}
p
{    
font-family: myFirstFont;
    font-size: 13px;
	    margin: 0 auto;
	
}
div#info {
    border-radius: 4px;
    margin: 0 auto;
    padding: 0 3px;
    width: 600px;
	border-bottom: 1px solid green;
    float: right;
}
#info a {
    float: left;
    margin-right: 5px;
}
form {
    text-align: center;
}

＆＃13;

<div id="info"><p>Pringui - 25 août 2016 - <a    href="Modifier.php">Modifier</a></p></div><div id="comment"> <p>Hello World.</p></div>

＆＃13;

Answer 2

您可以使用浮动在其他文本之前移动链接：

a {
  float: left;
}

＆＃13;

@font-face {
  font-family: myFirstFont;
  src: url(Minecraftia.ttf);
}
a {
  font-family: myFirstFont;
  text-decoration: none;
  font-size: 13px;
  float: left;
}
a::after {
  content: ' - ';
  white-space: pre;
}
div#comment {
  border-radius: 4px;
  margin: 0 auto;
  padding: 0 3px;
  width: 600px;
}
input[type=submit] {
  background-color: white;
  font-size: large;
  padding: 14px 20px;
  margin: 8px 0;
  border: 3px solid green;
  border-radius: 10px;
  cursor: pointer;
  font-family: myFirstFont;
  text-align: center;
}
input[type=text],
input[type=mail],
select {
  width: 600px;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #CCC;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #F8F8F8;
  font-family: myFirstFont;
}
textarea {
  width: 600px;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #CCC;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #F8F8F8;
  font-family: myFirstFont;
  resize: none;
}
p {
  font-family: myFirstFont;
  font-size: 13px;
  margin: 0 auto;
}
div#info {
  border-radius: 4px;
  margin: 0 auto;
  padding: 0 3px;
  width: 600px;
  border-bottom: 1px solid green;
}
form {
  text-align: center;
}

＆＃13;

<div id="info">
  <p>Pringui - 25 août 2016 <a href="Modifier.php">Modifier</a>
  </p>
</div>
<div id="comment">
  <p>Hello World.</p>
</div>

＆＃13;

text-align无法在链接上工作

2 个答案: