網頁分爲兩個可點擊的按鈕/鏈接，互相水平排列

我遇到的問題是我有一個網頁，應該被分成兩個大的div鏈接，如按鈕，一個在右邊，一個在左邊彼此水平放置。按鈕應占用每個屏幕的一半。頁面上還有頁眉和頁腳。我正在使用CSS表來嘗試和實現這一點。然而，我有很多問題試圖讓它看起來像我想要的樣子。網頁分爲兩個可點擊的按鈕/鏈接，互相水平排列

如果一個按鈕中有更多文本，它將在屏幕上延伸，並且按鈕將不再具有相同的大小。如果我嘗試使用table-layout：固定屏幕會按照我想要的方式拆分一半，但文本不會移動到按鈕/ div的中心，並且整個div不再是鏈接，而只是文本。

爲了讓它看起來像我想要的樣子，我需要兩個大的div鏈接，它們填充頁眉和頁腳之間的屏幕，大小相同，左邊一個，右邊一個，文本居中在塊和文本的大小不影響大小。也需要它在所有的瀏覽器中工作，但如果這不可能，只要鉻是好的。

這是我迄今爲止的解決方案。

<html> 
    <head> 
    </head> 
    <body> 

    <div id = 'menuChoiceContainer'> 
     <div id='menuChoiceHeader'> 
       <h1> 
        Management Tool 
       </h1> 
     </div> 
      <a href="/tool/itool/index.php" id="choicelink1"> 
       <span id="link-spanner1">MODELS1</span> 
      </a> 
      <a href="/tool/ytool/index.php" id="choicelink2"> 
       <span id="link-spanner2">MODELS2</span> 
      </a> 
     <div id='menuChoiceFooterWrapper'> 
      <div id='menuChoiceFooter'> 

      </div> 
     </div> 
    </div> 

    </body> 
</html> 

#menuChoiceContainer { 
    min-height: 100%; 
    position: relative; 
    width: 100%; 
    min-width: 1000px; 
    display: table; 
} 

#choicelink1{ 
    font: normal 5.10em/150px 'Capital TT', Arial, Helvetica, sans-serif; 
    min-height: 100%; 
    min-width: 100%; 
    display: table-cell; 
    position:relative; 
    vertical-align: middle; 
    text-align: center; 
    background-image: url(../images/menuchoiceverticalsplit.jpg); 
    background-repeat: no-repeat; 
    background-position: right center; 
    background-color: #fff; 
} 

#choicelink2{ 
    font: normal 5.10em/150px 'Capital TT', Arial, Helvetica, sans-serif; 
    min-height: 100%; 
    min-width: 100%; 
    display: table-cell; 
    position:relative; 
    vertical-align: middle; 
    text-align: center; 
    background-image: url(../images/menuchoiceverticalsplit.jpg); 
    background-repeat: no-repeat; 
    background-color: #fff; 
}

來源

2016-05-24 olliejjc16

你可以使用絕對定位把一個錨的左側和其它向右

HTML

<div id='menuChoiceContainer'> 
    <div id='menuChoiceHeader'> 
    <h1>Management Tool</h1> 
    </div> 
    <a href="/tool/itool/index.php" class="option" id="choicelink1"> 
    <span id="link-spanner1">MODELS1</span> 
    </a> 
    <a href="/tool/ytool/index.php" class="option" id="choicelink2"> 
    <span id="link-spanner2">MODELS2</span> 
    </a> 
    <div id='menuChoiceFooterWrapper'> 
    <div id='menuChoiceFooter'> 
    </div> 
    </div> 
</div>

CSS

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 
#menuChoiceHeader { 
    z-index: 100; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    height: 50px; 
    background-color: #EEE; 
} 

.option { 
    display: block; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
} 

.option span { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 50%; 
    transform: translateY(-50%); 
} 
#choicelink1 { 
    left: 0; 
    right: 50%; 

    font: normal 5.10em/150px 'Capital TT', Arial, Helvetica, sans-serif; 
    vertical-align: middle; 
    text-align: center; 
    background-image: url(../images/menuchoiceverticalsplit.jpg); 
    background-repeat: no-repeat; 
    background-position: right center; 
    background-color: #fff; 
} 

#choicelink2 { 
    left: 50%; 
    right: 0; 

    font: normal 5.10em/150px 'Capital TT', Arial, Helvetica, sans-serif; 
    vertical-align: middle; 
    text-align: center; 
    background-image: url(../images/menuchoiceverticalsplit.jpg); 
    background-repeat: no-repeat; 
    background-color: #fff; 
}

這裏是一個jsFiddle

你也可以使用它是很容易造成任何（甚至響應）的網頁佈局看看bootstrap examples。

來源

2016-05-24 08:37:29 Buksy

嗨，這真是太好了，真的幫了我很大的忙，我添加的只是字體大小調整大小而不是em/px，它的工作方式就像我想要的那樣，再次感謝！ – olliejjc16

基本上表格單元格等於表格中的td標籤。很多人在改變表格的大小時遇到問題。

通過創建一個顯示器作爲表格和表格單元，可以使事情變得複雜。

我建議你使用display：flex。這是更簡單的方法。通過在父標籤中聲明display：flex，父項中的標籤將以水平方式對齊。通過使用ID你可以給你想要的寬度標籤。

在給出的例子中，我平分了父母的空間。這裏100％爲4個標籤共享25％。否則，您可以將寬度單獨給予子元素。

確保子寬度的總和不超過父級。如果超過，將無法正常工作
例如：menuchoice-100％= header-10％，choicelink1-40％，choicelink2-40％，footer-10％

我希望這能奏效。

HTML：

<div id = 'menuChoiceContainer'> 

    <div class=child id='menuChoiceHeader'> 
    cool 
    </div> 
     <a class=child href="/tool/itool/index.php" id="choicelink1"> 
      <span id="link-spanner1">MODELS1</span> 
     </a> 
     <a class=child href="/tool/ytool/index.php" id="choicelink2"> 
      <span id="link-spanner2">MODELS2asdasdasdasd</span> 
     </a> 

    <div class=child id='menuChoiceFooterWrapper'> 
     <div id='menuChoiceFooter'> 
     cool 
     </div> 
    </div> 

</div>

CSS：

#menuChoiceContainer { 
min-height: 100%; 
position: relative; 
width: 100%; 
min-width: 1000px; 
display:flex; 
} 

.child 
{ 
width:25%; 
border:1px solid red; 
} 

#choicelink1{ 
font: normal 5.10em/150px 'Capital TT', Arial, Helvetica, sans-serif; 
position:relative; 
vertical-align: middle; 
text-align: center; 
background-image: url(../images/menuchoiceverticalsplit.jpg); 
background-repeat: no-repeat; 
background-position: right center; 
background-color: #fff; 
} 

#choicelink2{ 
font: normal 5.10em/150px 'Capital TT', Arial, Helvetica, sans-serif; 
position:relative; 
vertical-align: middle; 
text-align: center; 
background-image: url(../images/menuchoiceverticalsplit.jpg); 
background-repeat: no-repeat; 
background-color: #fff; 
text-wrap:normal; 
overflow:hidden; 
}

來源

2016-05-24 08:12:52

嗨嘗試了這一點，但所有的文字消失了頁面，它沒有格式正確，謝謝你的答案，但！ – olliejjc16

網頁分爲兩個可點擊的按鈕/鏈接，互相水平排列

回答

相關問題