2017-02-13 42 views
1

我需要的按钮排列一侧到另一侧不顶部和钮

<html> 
 

 
<body> 
 
    <div align="center"> 
 
    <form method="link" action="file:///C:/Users/David/Desktop/about%20samoyeds"> 
 
     <input type="submit" value="About Samoyeds" style="width:120px; height:40px; background-color: darkwhite; border-color: black; "> 
 
    </form> 
 
    <form method="link" action="http://www.hillspet.com/en/us/dog-breeds/samoyed"> 
 
     <input type="submit" value="History of Samoyeds" style="width:150px; height:40px; background-color: darkwhite; border-color: black; "> 
 
    </form> 
 
    <form method="link" action="file:///C:/Users/David/Desktop/dealers%20of%20samoyeds"> 
 
     <input type="submit" value="Samoyed Dealers" style="width:130px; height:40px; background-color: darkwhite; border-color: black; "> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>

pic of what code comes out as

这是我有很多我所用,但有没有做这个代码所以它不是在那里我有一个问题与该代码

回答

3

充分利用form元素display: inline-block;

顺便说一句,align属性已弃用。改用CSS来对齐/居中。

.wrap { 
 
    text-align: center; 
 
} 
 
form { 
 
    display: inline-block; 
 
}
<div class="wrap"> 
 
    <form method="link" action="file:///C:/Users/David/Desktop/about%20samoyeds"> 
 
     <input type="submit" value="About Samoyeds" style="width:120px; height:40px; background-color: darkwhite; border-color: black; "> 
 
    </form> 
 
    <form method="link" action="http://www.hillspet.com/en/us/dog-breeds/samoyed"> 
 
     <input type="submit" value="History of Samoyeds" style="width:150px; height:40px; background-color: darkwhite; border-color: black; "> 
 
    </form> 
 
    <form method="link" action="file:///C:/Users/David/Desktop/dealers%20of%20samoyeds"> 
 
     <input type="submit" value="Samoyed Dealers" style="width:130px; height:40px; background-color: darkwhite; border-color: black; "> 
 
    </form> 
 
</div>

+0

我没有你说什么,但它没有工作,这让按钮排队垂直上面一样,只是在屏幕的左侧,而不是中心 – mater116

+0

@ mater116复制粘贴这个http://codepen.io/anon/pen/MJLgqN –